Detailed explanation of the original method and upgraded method of obtaining form data in javascript

Everyone who has been in contact with Angularjs knows that ng supports two-way binding. We can easily bind our values ​​to the interface through ngModel. When the value is modified and the form is submitted, there is no need to re-pass the ID. Let’s re-capture the input box information. So when we develop the front-end website, we don't use MVVM frameworks such as ng, and only reference Jquery. So what should we do when processing forms.

1. Original approach

<p id="form">
  <select id=&#39;select1&#39;>
   <option value="">--请选择--</option>
   <option value="1">--1--</option>
   <option value="2">--2--</option>
   <option value="3">--3--</option>
  </select>
  <input id=&#39;radio1&#39; type="radio" />
  <input id=&#39;text1&#39; type="text" />
  <textarea id=&#39;textArea1&#39; ></textarea>
</p

Programmer A would say, So easy, it’s OK to get the value of each input box through Jquery id. How simple.

function getEntity(){
  return {
    select1:$("#select1").val(),
    radio1:$("#radio1").prop('checked'),
    text1:$("text1").val(),
    textArea1:$("textArea1").val()
  }
}

2. Upgrade method.

Programmer B said, this won’t work. Many pages have form submissions, so Jquery doesn’t have to be used everywhere. To get the value, if an input box is added in the future, every time the HTML is modified, the corresponding JS must be modified, which is very troublesome. So lazy programmer B thought of a way to do it through custom tags.

2.1 We package the form under p of a form, and add a data-field attribute to each input control. In the data-field, write the attribute name of the constructed entity, taking into account that nested objects will appear . Therefore, the attribute names in the data-field are separated by dots. For example, data-field='Person.Name' will construct { Person:{ Name:xxx }}. The following is an example of an object without nesting

<p id="form">
    <select data-field=&#39;select1&#39;>
     <option value="">--请选择--</option>
     <option value="1">--1--</option>
     <option value="2">--2--</option>
     <option value="3">--3--</option>
    </select>
    <input data-field=&#39;radio1&#39; type="radio" />
    <input data-field=&#39;text1&#39; type="text" />
    <textarea data-field=&#39;textArea1&#39;></textarea>
 </p>

2.2 Provide a getEntity method. Read the outer Form and find all the data-field attributes to traverse. Because the input box has checkbox and radio, input and select, the value is first taken out when judging the type. Then call the getField method to build the entity. The code will not be explained in detail. Everyone should be able to understand it. Just wanted to express my thoughts.

function getEntity(form) {
   var result = {};
   $(form).find("[data-field]").each(function() {
     var field = $(this).attr("data-field");
     var val;
 
     if ($(this).attr('type') == 'checkbox') {
       val = $(this).prop('checked');
     } else if ($(this).attr('type') == 'radio') {
       val = $(this).prop('checked');
     } else {
       val = $(this).val();
     }
     // 获取单个属性的值,并扩展到result对象里面
     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;
  }
}

Let’s take a look at nested objects

<p id="form">
    <select data-field=&#39;Person.Job&#39;>
     <option value="">--职位--</option>
     <option value="java工程师">java工程师</option>
     <option value="net工程师">.net工程师</option>
     <option value="python工程师">python工程师</option>
    </select>
    <input data-field=&#39;Person.Desc&#39; type="text" />
  </p>

2.5 Provides a method to obtain entities, of course Provide methods of assignment. Let’s take a look at the assignment method

function setEntity(form, entity) {
  $(form).find("[data-field]").each(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(&#39;checked&#39;, Boolean(value));
    } else {
      if (value) {
        $(this).val(value);
      } else {
        $(this).val("");
      }
    }
  })
}

The above is the detailed content of Detailed explanation of the original method and upgraded method of obtaining form data in javascript. For more information, please follow other related articles on the PHP Chinese website!