How to handle multiple form data via ajax to php

Question

<input type="text" value="2021-05-01" class="date" name="date">                     
<input type="text" value="10:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="7" class="hours" name="hours">

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:

<input type="text" value="2021-05-01" class="date" name="startdate">                        
<input type="text" value="10:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="7" class="hours" name="total">

<input type="text" value="2021-05-02" class="date" name="startdate">                        
<input type="text" value="11:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="6" class="hours" name="total">

// and so on till 2021-05-31

ADyson · Accepted Answer · 2021-08-20 11:27:22Z

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

<input type="text" value="2021-05-01" class="date" name="startdate[]">                        
<input type="text" value="10:00" class="starttime" name="starttime[]">                        
<input type="text" value="17:00" class="endtime" name="endtime[]">                        
<input type="text" value="7" class="hours" name="total[]">

<input type="text" value="2021-05-02" class="date" name="startdate[]">                        
<input type="text" value="11:00" class="starttime" name="starttime[]">                        
<input type="text" value="17:00" class="endtime" name="endtime[]">                        
<input type="text" value="6" class="hours" name="total[]">

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.

Luxato · Accepted Answer · 2021-08-20 11:05:46Z

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 <form id="form" ...> 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.

Collectives™ on Stack Overflow

How to handle multiple form data via ajax to php

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related