banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

How to submit a form gracefully

Tips: When you see this prompt, it means that the current article has been migrated from the original emlog blog system. The publication time of the article is too long ago, and the formatting and content may not be complete. Please understand.

How to Submit a Form Gracefully

Date: 2019-5-6 Ajue Code Torture Views: 1734 Comments: 1

This is a very basic HTML form submission issue, but it is a very practical technique. My business scenario is as follows:

A form that can dynamically create input fields, as shown in the figure below
image

This means that the name of the input cannot be fixed, otherwise it will definitely be overwritten.

First, the traditional normal submission method, give each input to be submitted a unique name#

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="name1" />
        <input type="text" name="num1" />
        <input type="text" name="img1" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name2" />
        <input type="text" name="num2" />
        <input type="text" name="img2" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="name3" />
        <input type="text" name="num3" />
        <input type="text" name="img3" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

The format captured by the browser submission is like this
image
The data printed by the server is like this, which is very unfriendly to backend data processing
image

Second, submit the form in an array format#

<form id="form1" action="./index.php" method="get">
    <div class="form-control">
        <input type="text" name="infos[1][name]" />
        <input type="text" name="infos[1][num]" />
        <input type="text" name="infos[1][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[2][name]" />
        <input type="text" name="infos[2][num]" />
        <input type="text" name="infos[2][img]" />
    </div>
    <br>
    <div class="form-control">
        <input type="text" name="infos[3][name]" />
        <input type="text" name="infos[3][num]" />
        <input type="text" name="infos[3][img]" />
    </div>
    ......
  <input type="submit" value="Submit" />
</form>

The format captured by the browser and printed by the backend are as follows
image
image
By careful observation, it can be found that the submitted name values have changed and become the same. An array?

When submitted to the backend, the data becomes much neater than before
But here, it should be noted that quotation marks are not needed in the submitted array keys, otherwise the quotation marks will also become part of the key

Of course, in practice, you may also encounter such problems. The number of groups to be submitted (like 1, 2, 3 in the above example) is uncertain. You can add them freely on the frontend. How to use arrays to submit these contents?

Below is the actual solution in my business
image
In this way, we don't need to maintain the keys of the two-dimensional array ourselves, and the browser will generate them for us
image
The data received by the backend becomes like this, which becomes very easy to handle
image
This method is suitable for submitting a group of related data with an uncertain number of items
End with a flourish!~

User Comments:

image Railgun 丶 Infinity 2 years ago (2019-05-21)
New skill acquired√

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.