Serialize is pumping out blank arrays

Question

So I am trying to send form data through ajax and am using serialize to do so. I have tried serializeArray as well and am getting the same results. I was hoping someone might be able to help me troubleshoot because I feel like i have tried everything. Please view a snippet of my code below:

function quizSubmit($quiz){
      console.log($quiz);
      var form='#'+$quiz;

      var data1=$(form).serializeArray();
      console.log(data1);
       $.ajax({
         type  : 'POST',
         url  : 'quizsubmit.php?quiz='+$quiz,
         data : data1,
         beforeSend : function() {
             $('#checklist-info-container').html('processing');
               console.log("sending");
         },
         error : function() {
             $('#checklist-info-container').html('failure');
               console.log("fail");
         },
         // success callback
         success : function (response) {
             $('#checklist-info-container').html(response);
               console.log("success");
         },
         timeout : 3000,
       })
    }

<table class="checklist-table">
              <form id="<?php echo $id; ?>" name="q1" method="post">
              <tr>
                <td class="checklist-info-title"><?php echo($title); ?></td>
              </tr>
              <tr>
                <td class="checklist-info-description"><div>
                  <div class="form-group required quiz-question">
                    <label class="control-label" for="question1">What did you learn?</label>
                    <div class="radio">
                      <label><input type="radio" name="question1" value="answer1">Nothing</label>
                    </div>
                    <div class="radio">
                      <label><input type="radio" name="question1" value="answer2">Something</label>
                    </div>
                  </div>
                  <div class="form-group required quiz-question">
                    <label class="control-label" for="question2">Question 2</label>
                    <div class="radio">
                      <label><input type="radio" name="question2" value="answer1">Answer 1</label>
                    </div>
                    <div class="radio">
                      <label><input type="radio" name="question2" value="answer2">Answer 2</label>
                    </div>
                  </div>
                  <div class="form-group required quiz-question">
                    <label class="control-label" for="question3">Question 3</label>
                    <div class="radio">
                      <label><input type="radio" name="question3" value="answer1">Answer 1</label>
                    </div>
                    <div class="radio">
                      <label><input type="radio" name="question3" value="answer2">Answer 2</label>
                    </div>
                  </div>
                  <div class="form-group required quiz-question">
                    <label class="control-label" for="question4">Question 4</label>
                    <div class="radio">
                      <label><input type="radio" name="question4" value="answer1">Answer 1</label>
                    </div>
                    <div class="radio">
                      <label><input type="radio" name="question4" value="answer2">Answer 2</label>
                    </div>
                  </div>
                </div></td>
              </tr>
              <tr>
                <td class="quiz-button"><button class="btn btn-success" onclick="quizSubmit(<?php echo $id; ?>);">Submit</button></td>
              </tr>
            </form>
            </table>

The second console log print out keeps printing an array of length 0 with nothing in it. but am not sure why.

Answer 1

You need to change your javascript code. Replace $quiz to quiz

function quizSubmit(quiz){
  console.log(quiz);
  var form='#'+quiz;

  var data1=$(form).serializeArray();
  console.log(data1);
  .......
  .......
}

jQuery sets the global $ variable to an object with a number of special behaviors, so variables beginning with $ are often reserved for variables orvalues related to jQuery.

In you are html code you are not passing variable as jquery object. it seems you are passing as javascript variable.