jQuery solves form submission with too many inputs_jquery

Recently, I received a rather strange request. The other party requested to add a word-like form to the corporate website for users to fill in and submit online.

Looking carefully, the form has more than a hundred fields, which is quite scary. If you manually fill in the id and name for each input, it would be such a terrible physical work.

After thinking about it again and again, in order to avoid having to fill in the input id and name one by one, I decided to use JS and PHP to solve the series of submission tasks of this form.

Form components

The form first follows the customer's requirements, and the forms and options that need to be filled in are laid out according to the prototype of the word document to make it consistent with the user experience, as shown below:

(The above picture is just a small part of the form as an example. In fact, this form is extremely large)

After the html layout of the form is completed, we need to start setting the id and name of the input of these forms for form submission.

As mentioned in the preface, there are a lot of inputs, so we use JS here to automatically add id and name to the inputs. The code is as follows (jquery method):

$(document).ready(function(){
var inputNum = 0;
$(‘input').each(function(){
$(this).attr({name:‘val'+inputNum,id:‘val'+inputNum});
inputNum++
})})

After processing through js, all inputs on the page will automatically add id and name by increasing by 1. At this point, this form can basically be used normally. (I won’t explain frome, all programmers understand it.)

Form GET part

OK, the form can be submitted to the PHP program for processing normally. Of course, the above method is also applicable to any kind of web program, such as .net, jsp, asp, etc...

The next step is to disassemble the submitted string to obtain the value in the form. This article will not explain how to obtain the passed value of the form.

Since there are also N values ​​passed from the form, it is impossible for us to write array variables one by one to obtain these values, so we also need to use some methods to deal with them here.

Okay, let’s get down to business. First, let's think about how to increment each of these arrays by 1 according to the previous js program logic to achieve the output of the array.

The program code is as follows:

<&#63;php
$num = 0; //初始化计数变量
$_REQUEST[‘val'.$num]; $num++; //插入到需要获取值的地方，每个需要获取传值的地方重复使用这串代码即可
&#63;>

This set of codes is mainly used when the order of form input and request is consistent. If the order cannot be matched one by one, confusion will occur. So you need to be careful when using it!

When submitting to the database, you can consider using foreach to process the obtained parameters into an array and then insert it into the database. It will be more convenient.