Capture & Send Multiple Array Values into Ajax
HTML
<form method="post" id="unitDataForm">
<label for="unit_id">unitID</label>
<input type="text" name="unit_id" value="1" />
<br />
<button type="button" title="disabled for this demo" value="Add">Add New</button><span style="color:red">**disabled for this demo**</span>
<br />
<p>-------------------------</p>
<br />
<label for="seqImg">seqID[1]</label>
<input type="text" name="seqImg[]" value="20" />
<br>
<label for="seqDesc">seqDesc[1]</label>
<textarea name="seqDesc[]" /></textarea>
<br />
<p>-------------------------</p>
<label for="seqImg">seqID[2]</label>
<input type="text" name="seqImg[]" value="30" />
<br>
<label for="seqDesc">seqDesc[2]</label>
<textarea name="seqDesc[]" /></textarea>
<br />
<p>-------------------------</p>
<label for="seqImg">seqID[3]</label>
<input type="text" name="seqImg[]" value="40" />
<br>
<label for="seqDesc">seqDesc[3]</label>
<textarea name="seqDesc[]" /></textarea>
<br />
<p>-------------------------</p>
<button type="submit" title="Submit" value="Submit">Submit</button>
</form>
JavaScript
$(function () {
$('#unitDataForm').submit(function (e) {
e.preventDefault();
var formData = {
'ajax_unit_id': $('input[name = unit_id]').val()
};
var seqCount = $('input[name="seqImg[]"]').length;
//alert(seqCount);
var si_array = $('input[name^="seqImg"]');
var sd_array = $('textarea[name^="seqDesc"]');
for (var i = 0; i < seqCount; i++) {
//alert(i);
var seq_image = 'ajax_seq_image['+i+']';
var seq_desc = 'ajax_seq_desc['+i+']';
var si= si_array[i].value;
var sd= sd_array[i].value;
//alert(seq_image+'<br>'+si);
//alert(seq_desc+'<br>'+sd);
//var seq_array = seq_image+':'+si+','+seq_desc+':'+sd+',';
//alert(seq_array);
formData.append(seq_image, si);
formData.append(seq_desc, sd);
}
alert(formData);
// ajax here
});
});