Acquiring large form data

　　If a small amount of data, then the form can obtain data directly by name or id attribute,

? But if there are dozens of hundreds of input form or textarea form it like this: 

 

 One data acquisition very troublesome,  can consider FormData + for data acquisition cycle

Was added to form a form id = "FormData", acquired by the form element selector and the object passed FormData

code show as below:

<form id='formData'>
    <input type='text' name='name' value='zhou'>
    <input type='text' name='age' value='20'>
    <input type='text' name='sex' value='男'>
</form>
<script>
        let fd = new FormData(document.getElementById('formData'));
        for (let [name, value] of fd) {
    　　    console.log("name, value",name, value);
　　  　　}
</script>    

So that you can get all the data in the form.

However there is a problem, if the input has the same name attribute can only be obtained a value, it will cover the front of the rear, 

For very large form may have the same name attribute, such as Project Name   Project Name technology leaders responsible person's name , etc., in the field in the database you are likely to "name", 

In this case how to obtain the correct back-end distributed data and according to a certain format?

 

You can add a prefix to the name and other properties to ensure the name is not the same, time to get data and then remove the prefix.

Assuming that the back-end data format is required:

{

　　project: {}, // item information

　　prjLeader: {}, // project leader information

　　skillLeader: {} // Head of Information Technology

}

 

Portion corresponding to HTML:

<form id='formData'>
    <input type='text' name='project-name' value='project-name'>
    <input type='text' name='prjLeader-name' value='prjLeader-name'>
    <input type='text' name='skillLeader-name' value='skillLeader-name'>
</form>

 

Corresponding parts js:

AllData = the let { 
　　Project: {}, // item information 

　　prjLeader: {},   // project leader information 

　　skillLeader: {}   // technical director of information 
} 
the let fd = new new FormData (document.getElementById ( 'formData' )) ;
         for (the let [name, value] of FD) {
             // the console.log ( "name, value", name, value); 
            IF (! name.indexOf ( 'Project-' )) { 
                allData.project [name. Slice ( . 8)] = value; 
            } the else  IF (name.indexOf ( 'skillLeader-'! )) { 
                allData.skillLeader [name.slice ('skillLeader-'.length)] = value;
            } else if ( !name.indexOf('prjLeader-') ){
                allData.prjLeader[name.slice('prjLeader-'.length)] = value;
            }
        }

  if else more, then the proposed change switch, you can also use jQuery's $ ( 'form') serialize ( );. and  $ ( 'form' ). serializeArray (); but not to classify the data .

Code Interpretation:

name.indexOf ( 'project-') is to look at the acquired name in the beginning of the project- name, if the find will return to find the location where a positive return 0 if found, could not find returns -1,

! name.indexOf ( 'project-')! number represents a negation, returns 0 if found, 0 inversion becomes true, the representative successfully found a name beginning project- 

then removed name with name.slice (8) Project- prefix, and then removed after the prefix name as the key object name corresponding to the target value as the value, and so on,

这样就自动获取了表单的所有数据并且按照格式分类好, 然后发给后端即可.

如果要新增表单数据只需要改HTML, 不用改动js.