Question posted in
You can find the official documentation here.

How to handle multiple form data via ajax to php – Jquery ajax

<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
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search