Using JS to easily realize _javascript technique of obtaining form data

Contact with Angularjs know that NG supports bidirectional binding, we can easily bind our values to the interface through Ngmodel, and when we modify the value submission form We do not need to reenter the ID to crawl the input box information again. So for us to develop the foreground site, not ng a class of MVVM framework, only reference jquery, then what to do when the form is processed.

I. Original approach

<div id= "Form" >
  <select id= ' Select1 ' >
   <option value= ' ">--Please select--</option>
   < Option value= "1" >--1--</option>
   <option value= "2" >--2--</option>
   <option value= "3 ">--3--</option>
  </select>
  <input id= ' radio1 ' type= ' Radio '/> <input
  ' id= ' Text1 ' type= "text"/>
  <textarea id= ' textArea1 ' ></textarea>
</div>

Programmer A would say, so easy, to get the value of each input box through the jquery ID is ok. How simple.

function GetEntity () {return
  {
    select1:$ ("#select1"). Val (),
    radio1:$ ("#radio1"). Prop (' checked '),
    text1:$ ("Text1"). Val (),
    textarea1:$ ("TextArea1"). Val ()
  }

Two. Upgrade practices.

Programmer B said, this is not good oh, many pages have form submission, it is not everywhere to use jquery to get the value, if the new input box, each time the HTML modified, but also to modify the corresponding JS, much trouble. So lazy programmer B thought of a way to do it through a custom label.

2.1 We wrap the form under the div of a form, and each input control adds a Data-field property. Data-field the property name of the build entity, considering that the nested object appears. So Data-field inside the property name passed. Points, such as data-field= ' Person.name ' will be built out of {person:{name:xxx}}. The following is an example of an object that has no nesting

<div id= "Form" >
    <select data-field= ' Select1 ' >
     <option value= ' ">--Please select--</option>
     <option value= "1" >--1--</option>
     <option value= "2" >--2--</option>
     < Option value= "3" >--3--</option>
    </select>
    <input data-field= ' Radio1 ' type= "Radio"/>
    <input data-field= ' text1 ' type= text '/> <textarea data-field= '
    textArea1 ' ></textarea>
 </div>

The

2.2 provides a getentity method. Read the outer form and find all the Data-field attributes to traverse. Because the input box has checkboxes and Radio,input and select, the judgment type first takes out the value. The GetField method is then invoked to build the entity. The code will not be answered in detail. Should all be able to read. Just want to express the idea of thinking.

function GetEntity (form) {
   var result = {};
   $ (form). Find (' [Data-field] '). each (the function () {
     var field = $ (this). attr ("Data-field");
     var Val;
 
     if ($ (this). attr (' type ') = = ' checkbox ') {
       val = $ (this). Prop (' checked ');
     } else if ($ (this). attr (' type ') = = ' Radi O ') {
       val = $ (this). Prop (' checked ');
     } else {
       val = $ (this). val ()
     }
     Gets the value of a single property and extends into the result object
     GetField (Field.split ('. '), Val, result);
   return result;
 }

function GetField (fieldnames, value, result) {
  if (Fieldnames.length > 1) {for
    (var i = 0; i < FieldNames . length-1; i++) {
      if (result[fieldnames[i]] = = undefined) {
        Result[fieldnames[i]] = {}
      } result
      = result[ Fieldnames[i]];
    }
    RESULT[FIELDNAMES[FIELDNAMES.LENGTH-1]] = value;
  } else {
    Result[fieldnames[0]] = value;
  }
}

2.3 below to see the results of the above output, haha value is taken.

2.4 Below, let's look at the nested objects

<div id= "Form" >
    <select data-field= ' person.job ' >
     <option value= ' ">--position--</option>
     <option value= "Java Engineer" >java engineer </option>
     <option value= "NET Engineer" >.net engineer </option >
     <option value= "python engineer" >python engineer </option>
    </select>
    <input data-field= ' Person.desc ' type= "text"/>
  </div>

2.5 provides a way to get the entity and, of course, to provide a method of assigning value. Let's look at the method of assigning values

function setentity (form, entity) {
  $ (form). Find (' [Data-field] '). each (the function () {
    var field = $ (this). attr (" Data-field ");
    FieldNames = Field.split ('. ');
    var value = Json.parse (json.stringify (entity));
    for (var index = 0; index < fieldnames.length; index++) {
      value = Value[fieldnames[index]];
      if (!value) {break
        ;
      }
    }
    if ($ (this). attr ("type") = = "checkbox" | |
      $ (this). attr ("type") = = "Radio") {
      $ (this). attr (' checked ', Boolean (value));
    } else {
      if (value) {
        $ (this). Val (value);
      } else {
        $ (this). Val ("");}}
  )
}

Oh, the value attached up.

Three. Summary:

The above is just a solution, although the foreground system does not consider using the REACT,ANGULARJS MVVM framework, as in the case of a background backend system, although it only uses a jquery. However, we can still use some methods to simplify the project code.

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if there are questions you can message exchange, but also hope that a lot of support cloud Habitat community!