Question

I created a form, and I want to use jquery to store the labels and the user inputted input value into an array. At the bottom of the form, there is a next button instead of submit. When the user presses next, they should see a summary of all of the labels and their input. The HTML is like this:

<div class="form-item">
    <label>Zip Code:</label>
    <input type="text" />
</div>

<div class="form-item">
    <label>Address:</label>
    <input type="text" />
</div>

I believe the best way to go about this is to loop thorugh each div.form-item using each() like so:

$(".form-item").each(function(){
     var label = $(this).find('label').text(); 
     var input = $(this).find('input').val();
});

Im not sure how to go about collecting multiple chunks of form items using unique variables. I want this to be completely dynamic, so regardless of how many form fields there are, it will work. DO I store them in an array? What is the best way to go about this?

Answer 1

You can use map method, also note that your class selector is not correct, you have missed a ..

var arr = $('.form-item').map(function() {
               var lab = $('label', this).text();
               var val = $('input', this).val();
               return lab + val;
          }).get()

http://jsfiddle.net/b5Z6C/2/