Form submission in array mode

I encountered a problem today. I had to save a lot of form information. After worrying about it for a long time, I finally found a pretty good way to submit the data in the form to the background in the form of an array for storage.

　In fact, it is very simple to implement, that is, there must be certain standards when naming the information to be submitted in the form. Let us first compare the differences between the following two methods:

The first, ordinary way, each value to be submitted has a name

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

　The service (index.php) is very simple, just two sentences

<?php
echo "<pre class="brush:php;toolbar:false">";
print_r($_GET);

　Fill in the following information on the rendered webpage and click Submit

The Query String Paramaters seen through the browser are like this

You will receive this message in the service section

This may not be easy to handle for the backend. If you can put three pieces of information from the same group in an array, it would be much easier to handle. Let’s look at another way

Second, array method for form submission

<form action="./index.php" method="get">
	<div>
		<input type="text" name="infos[1][name]" />
		<input type="text" name="infos[1][num]" />
		<input type="text" name="infos[1][img]" />
	</div>
	<br>
	<div>
		<input type="text" name="infos[2][name]" />
		<input type="text" name="infos[2][num]" />
		<input type="text" name="infos[2][img]" />
	</div>
	<br>
	<div>
		<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>

If you look carefully, you will find that the name of the data to be submitted has changed. It may not be obvious here. When you click submit, you will find that the values ​​​​passed to the backend are much neater. Take a look at the screenshot below

The query string parsed through the browser plug-in is like this

The data printed by the server is like this:

When the background receives such data, it will be much easier to process and save a lot of things. Of course, there is something to pay attention to here. When naming the value to be submitted, there is no need to add quotation marks in the array. Add There will be quotation marks in the backend key value after the quotation marks, so please pay attention to this. Another thing to note is that the more popular method now is ajax submission. How to get the value in the form when submitting with ajax? This is actually very simple. The serialize() method provided by jquery can easily splice all the content to be submitted into a url string, and then submit it to the background through get.

　Of course, you may encounter such a problem in practice. The number of groups to be submitted (like 1, 2, and 3 above) is uncertain and can be added at will on the front end. How to use an array to submit these contents at this time? Woolen cloth? This can still be solved easily and easily with the right tools,

<form action="./index.php" method="get">
	<div>
		<input type="text" name="infos[name][]" />
		<input type="text" name="infos[num][]" />
		<input type="text" name="infos[img][]" />
	</div>
	<br>
	<div>
		<input type="text" name="infos[name][]" />
		<input type="text" name="infos[num][]" />
		<input type="text" name="infos[img][]" />
	</div>
	<br>
	<div>
		<input type="text" name="infos[name][]" />
		<input type="text" name="infos[num][]" />
		<input type="text" name="infos[img][]" />
	</div>
	......
  <input type="submit" value="Submit" />
</form>

Let’s first look at the data passed by the browser

　　

The data received by the backend at this time is like this

　

　With such data, it is easy to classify the information of each group. Isn’t it very convenient? Before using this method, I had a headache every time I encountered such a problem. Now I can easily solve it.

　The copyright of this article belongs to the author iforever (luluyrt@163.com). Any form of reprinting is prohibited without the author's consent. After reprinting the article, the author and the original text link must be provided in an obvious position on the article page, otherwise the right to pursue legal liability is reserved. .

The above introduces the array method for form submission, including the relevant aspects. I hope it will be helpful to friends who are interested in PHP tutorials.