Question:

How to send multiple HTML form fields to PHP arrays via Ajax?

Problem

I'd like some help. I have the HTML form fields below and I want them to be sent to a PHP page to individual PHP arrays.

HTML

Javascript:

function reportSave() {

//Test Report Name

//get the data from test report name

var testreport=document.getElementsByName('testreportname[]');

var testreportdate=document.getElementsByName('testreportdate[]');

var testreportissue=document.getElementsByName('testreportissue[]');

var data1 = $(this).serializeArray();

//for each item in the array

for(key=0; key < testreport.length; key++) {

data1.push({

testreport: $("#testreport").val(), testreportdate: $("#testreportdate").val(), testreportissue: $("#testreportissue").val(),

});

console.log("key: ", key)

console.log(testreport)

}

//send to PHP via ajax

$.ajax({

type: "post",

url: "draftsave.php",

dataType: "json",

data: data1,

success: function(result) {

console.log(result)

}

});

}

</script>

PHP

<?php

$stestreport=$_POST['testreport'];

$stestreportdate=$_POST['testreportdate'];

$stestreportissue=$_POST['testreportissue'];

for($i=0;$i<count($stestreport);$i++)

{ code here, etc};

Edit, removed already tried code.

Solution:

jQuery provides the serialize() function, which provides a really simple way to get all the data from a form or a specific set of fields and convert them into the form-url-encoded format that they would ordinarily be transmitted in if you submitted a regular form (without AJAX). This is the format PHP recognizes and will automatically convert into data in its $_POST array.

This little demo shows

What serialize() outputs
A way to select the specific fields you're interested in using a class name (notice the extra class on each input field in the HTML)
A nicer way to handle the "change" event unobtrusively using a selector, rather than littering the HTML with onchange attributes.

$(".reportField").change(function() {

var formFields = $(".reportField").serialize();

console.log(formFields);

});