How do I submit multiple forms with the same name attribute

　　Sometimes we encounter such a demand, a number of pages a user history information, a history record information corresponding to each data table, the user can add or modify, click Save at the same time submit to the background. There are two difficulties: 1, how to submit multiple front-end history information is a one-time? 2, how to get back the value of the same name multiple property values ​​form submitted form input tag?

E.g:

<form action="test.php" method="post" enctype="application/x-www-form-urlencoded">
    姓名：<input type="text" name="name">
    年龄：<input type="text" name="age">
    <hr>
    姓名：<input type="text" name="name">
    年龄：<input type="text" name="age">
    <input type="submit" class="submit">
</form>

 

There are two fields in this form: name, age. input name attribute value of the two fields are identical. If we use the default submission form: in two forms were submitted, that information can only submit a form; if in a form submitted directly, it can only get back the last piece of information in a form, because the name attribute value the same information back overwrite the previous information. This time it is necessary to use another method of.

1, the form of plain text submitted

First, we want to re-process the form code behind the property plus the value of the name attribute in a [], plus [] equivalent to the value into an array, so do not worry about the value of the latter will overwrite the previous value of the.

<form action="test.php" method="post" enctype="application/x-www-form-urlencoded">
    姓名：<input type="text" name="name[]">
    年龄：<input type="text" name="age[]">
    <hr>
    姓名：<input type="text" name="name[]">
    年龄：<input type="text" name="age[]">
    <input type="submit" class="submit">
</form>

Of course, you can also manually modify the value of the name attribute, add a logo, so that they become different, but more trouble, but to get back after the treatment is too much trouble.

Now the page is modified, the background directly var_dump ($ _ POST) printed at the results coming from the front.

The results are as follows:

 

Can be seen, the received background data is a two-dimensional array, key values ​​for the name attribute of the form. Then background process after receiving

for($i=0;$i<count($_POST['name']);$i++){
   $arr[$i]=array_column($_POST,$i);
}
var_dump($arr);

The results are as follows:

 

 

 2, contains the file form submission

　　

 

 

 And plain text form upload, we can submit the form information by the array. Then print $ _FILES array

The results are as follows:

 

Of course, in addition to this way there is another way, that is using ajax submit.

code show as below:

<form enctype="multipart/form-data">
    姓名：<input type="text" name="name">
    年龄：<input type="text" name="age">
    <input type="file" name="pic">
    <hr>
    姓名：<input type="text" name="name">
    年龄：<input type="text" name="age">
    <input type="file" name="pic">
</form>
<input type="submit" class="submit">
</body>
<script>
    $('.submit').click(function () {
        var form = $('form')[0];
        var formdata = new FormData(form);
        $.ajax({
            url: 'test.php',
            data: formdata,
            type: 'post',
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (data) {
                // code…………
            }
        });
    });
</script>

FormData is an object of the js, without introducing other libraries can be used directly. Function name and the value form form elements are combined to achieve serialized form data to reduce splice form elements, improve efficiency, that can replace the form is submitted. FormData parameter is a DOM object, do not forget to convert the acquired object Jquery Jquery method using DOM object. After the re-use Ajax method to pass the background. ContentType value and processData which properties can be set to false, function is to form the enctype = "application / x-www -form-urlencoded" convert enctype = "multipart / form-the Data" , otherwise the file will be submitted.

Since submit forms using ajax very troublesome, why should we use it, mainly to implement asynchronous transfer. Many times After the user submits the form you want to know whether the submission is successful, but also need to return a message back to the user, the user's guide to the next step. If you do not use asynchronous transfer, after it completed the user to fill in information and submit detailed background error returns an error to the user if it is found, the page has been refreshed finished form, the information must be filled before re-fill it again or more. Very troublesome.