JQuery - Reading an array of form values and displaying it?

Question

I have a form and in the form I'm appending hidden values dynamically via JQuery and these hidden values look like this:

<input type="hidden" name="times[]" value="{'time': '5:00pm','date': 'april 15th'}" />
<input type="hidden" name="times[]" value="{'time': '6:00pm','date': 'april 16th'}" />
<input type="hidden" name="times[]" value="{'time': '7:00pm','date': 'april 17th'}" />

Using JQuery how can I iterate through the times[] array and output each value so the person can see all the values they have been adding in the form prior to submitting the form?

score 4 · Accepted Answer · answered Apr 15 '12 at 23:32

$('input[name="times[]"]').each(function(){
    console.log($(this).val()); // Or anything you like.
});

Or you could use an array to push all fetched values in it. What are you going to do with the values is entirely up to you.

var values = [];
$('input[name="times[]"]').each(function(){
    values.push($(this).val());
});

score 0 · Answer 2 · answered Apr 15 '12 at 23:36

First off you'll need to have unique names for each of the hidden fields. I'd suggest times[0], times[1], etc...

To iterate through them, also give them all the same class, and use each.

for (var i = 5; i > 0; i--) {
    $('<input type="hidden" name="times[' + i + ']" class="times" value="{your array values here}" />').appendto('.myform');
}

Then after the values are set:

var times = '';
$('.times').each(function() {
    times = times + $(this).val() + '<br />';
});
$('.values').html(times);

where values is the container that you use to show the values.

JQuery - Reading an array of form values and displaying it?

2 Answers2

Linked