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
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
The data printed by the server is like this, which is very unfriendly to backend data processing
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
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
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
The data received by the backend becomes like this, which becomes very easy to handle
This method is suitable for submitting a group of related data with an uncertain number of items
End with a flourish!~
User Comments:
Railgun 丶 Infinity 2 years ago (2019-05-21)
New skill acquired√