How to handle multiple form data via ajax to php

Question

Normally I handle this data as shown below:

var date $('.date');val();
var starttime $('.starttime');val();
var endtime $('.endtime');val();
var hours $('.hours');val();

$.ajax({
        url: 'process.php',
        data: {             
                date: date,
                starttime: starttime,
                endtime: endtime,
                hours: hours,                               
        },
        type: "POST",       
        success: function (data) {          
            $('.response').html(data); // echo success in div .response                                                             
        },
                                    
});

And my php:

$maydata = [];
$maydata['date'] = $_POST['date'];
$maydata['starttime'] = $_POST['starttime'];  
$maydata['endtime'] = $_POST['endtime'];
$maydata['hours'] = $_POST['hours'];

$id = 'id_'.$maydata['date'].str_replace('-','',$maydata['date']); // stirp out hyphens from date
$file = 'data/'.$id.'.json';
$jsonData = json_encode($maydata, JSON_NUMERIC_CHECK | JSON_PRETTY_PRINT);
file_put_contents($file, $jsonData);
echo 'data stored succesfully!';

My json file (id_20210501.json) looks like this:

{
    "date": "2021-05-01",
    "starttime": "10:00",
    "endtime": "17:00",
    "hours": 7
}

The above form contains only the 1st of May with its starttime, endtime and hours.

How can I do this easily for all the days of May (for example)?

So my form looks like:

                        
                        
                        


                        
                        
                        


// and so on till 2021-05-31

user_5659479 · Answer

Writing a variable in javascript for every input is very time demanding.

I suggest you to implement .serialize() that you can call on a whole form. For example like on the example below. If you then wish to add more values, you can append them at the end.

assuming that you have a

somewhere.

$.ajax({
    url: 'process.php',
    data : $('#form').serialize() + "&variable=value",
    type: "POST",       
    success: function (data) {          
        $('.response').html(data); // echo success in div .response                                                             
    },                                
});

On the backend side, don't forget to sanitize the values that come from frontend to avoid security holes.

user_5947043 · Answer

To submit multiple fields with the same name in a HTML form you need to use array syntax in the name attributes:

Then in the jQuery, rather than pulling out each field individually, just have jQuery serialize the whole form automatically for you:

data: $("#form").serialize()

(Obviously replace the "#form" selector with the real ID of your form - it's not visible in your question so I can't use it here.)

This will get you a multi-dimensional array of values in $_POST on the server-side.

How to handle multiple form data via ajax to php

2 Answers