Question

I have a form on my page that is located in a class .class-lesson. The form itself only contains text field and radio buttons. I do not know how many of each are in the form since it is dynamically generated by PHP. Each new input in the form is named q1, q2, … qn.

I am trying to get all the values, whether answered or not, and stored into a javascript array. This is my code so far:

// get the value of each input field
var numQuestions = $(".class-lesson label").not(".csubmit").length;

// store each answer
for (var i = 0; i < numQuestions; i++) {
 // store our variables
 var tempAnswer = undefined;
 var tempReference = $(":input[name=q"+(i+1)+"]");
 // loop through each item
 if ( tempReference.attr('type') == 'radio' ) tempAnswer = $(":input[name=q"+(i+1)+"]:checked").val();
 else tempAnswer = tempReference.val();
 // output / store the item
 alert( tempAnswer );
}

I am sure there has to be an easier way to do this but I don’t know. This is why I am asking. If I don’t have the :checked then it will just grab the first value of the radio group.

So, how can I make this more efficient?

Answer 1

To get an entire <form> (or any set of inputs) in serialized form, as it would be if submitted to the server normally (without any JavaScript involved), use .serialize(), like this:

var formData = $(".class-lesson :input").serialize();
//or...
var formData = $("#formID").serialize();

If you’re submitting via AJAX for example this makes your code incredibly simple, for example:

$.post("test.php", $("#formID").serialize(), function(data) {
  alert("Response was: " + data);
});