How to improve the efficiency of writing form by using jquery selector _jquery

I believe that many small partners will encounter the need to do form, as I now do the hospital project, the vast number of endless forms. The most stupid way to start a form is to define IDs in spans, each data is assigned with Ajax, and then a model is submitted to the server using jquery to get the value of the element based on the ID.
It was later discovered that using jquery would greatly simplify the process. So I changed my working methods and summed up some of my ways to improve the efficiency of writing forms.

Demand

The most common forms in the form are text, text boxes, radio boxes, and multiple marquee boxes. Some of the forms will have dozens of or even hundreds of options. Our goal is to achieve the highest efficiency of these forms of data acquisition and data submission.
Note: If the element ID is the same as the name of the JSON field obtained on the server, this article may help you improve your productivity.

Text and text boxes

For text and text boxes, we usually need to add IDs to the elements to bind and get the data.

Display data to an interface
• Parse successful JSON data with a for loop
• Filtering data through if is span or input.
• Pass data to an ID element with the same name as the data name.

 for (Var key in JSON) {
  //Filter text box with type text
  ($ (' # ' + key). attr (' type ') = = ' text ') {
    $ (' # ' + key). Val (Json[key ]);
  }
  if ($ (' # ' + key). Prop (' tagName ') = = ' SPAN ') {
    $ (' # ' + key). Text (Json[key]);
  }

Fast get Data Objects for submitting servers
• Define an empty model object.
• Gets the value of the target element through the jquery selector.
• Pass data into model, and the field of the object element is the ID of the HTML element.

var model = {};
$ (' input[type= ' text '] '). each (function () {
  model[$ (this). attr (' id ')]=$ (This). Val ();
});
$ (' span '). each (the function () {
  model[$ (this). attr ("id")]=$ (This). text ();
});
Console.log (model);

In the following way, we just need to follow the data field provided by the backend to define the HTML ID, and JS does not need to write too much code to complete the form. I'm not afraid of too many form fields.

All code

<! DOCTYPE html>  

Radio and checkbox

Another common occurrence in the form is the radio, checkbox, and the optional multiple elements. These elements typically name a set of options with name. I also use jquery to simplify the display and submission of data.

Display data

Like the previous text, use a For loop to traverse the JSON data and then display it through the if filter to the interface. The difference is that this is where the data is displayed and bound by name.
Note: The radio and checkbox processing methods are written in the back, so copy and paste the students please pay attention to do not leak ~

for (Var key in JSON) {
  if ($ (' input[name= ' + key + '] '). attr (' type ') = = ' Radio ') {
   showradiovalue (key, Json[key]) c5/>}
  if ($ (' input[name= ' + key + ']). attr (' type ') = = ' checkbox ') {
   showcheckboxvalue (key, Json[key]);
}

Ways to get Data model
• Define an empty model object.
• Define name to avoid duplicate additions.
• Traverse all radio get results to model
• Traverse all checkbox fetch result pass to model

     function Showresult () {
      var model = {};
      var radioname = ';
      var checkboxname = ';
      $ ("input[type= ' Radio ']"). each (function () {
        if ($ (). attr (' name ')!= radioname) {
          Radioname = $ (this). attr ( ' name ');
          Model[radioname] = Getradiovalue (radioname);
        }
      });
      $ ("input[type= ' checkbox ']"). each (function () {
        if ($ (this). attr (' name ')!= checkboxname) {
          Checkboxname = $ ( This). attr (' name ');
          Model[checkboxname] = Getcheckboxvalue (checkboxname);
        }
      });
      Console.log (model);
    }

Some ways to handle radio and checkbox

Here I write a few ways to show and get results for radio and checkbox.

    function Showradiovalue (name, value) {$ (' input[name= ' + name + '] '). each (function () {if (value = = $ (t)
        His). Val () {$ (this). attr (' checked ', ' true ');
    }
      });
      function Getradiovalue (name) {var value = 0;
      var i = 0;
          $ (' input[name= ' + name + '] '). each (function () {if ($ (' input[name= ' + name + ') '). EQ (i). Is (': Checked ')) {
          Value = $ (' input[name= ' + name + '] '). EQ (i). Val ();
        Return
      } i++;
      });
    return value;
      function Showcheckboxvalue (name, value) {var values = value.split (', ');
      var row = 1; $ (' input[name= ' + name + ' '] '). each (function () {if (values[row] = = 1) {$ (this). attr ("Checked", ' tr
        UE ');
      } row++;
    });
      function Getcheckboxvalue (name) {var text = "";
        $ (' input[name= ' + name + '] '). each (function () {var = ';
 if ($ (this). Is (': Checked ')) {         t = "1";
        else {t = "0";
      } Text = "," + t;
      });
    return text;

 }

Code

<! DOCTYPE html>  

Tips
• If you have something special to deal with (such as time format text), you can iterate through it and assign it separately after the traversal.
• The above method can be used for all HTML elements defined with IDs for displaying and fetching data.
• Use a good jquery selector to get to any required element, element collection.
• In each () method, $ (this) represents the current element.
• Get the element label for the selected ID: $ (' # ' + key). Prop (' tagName ') = = ' span ', note: The label result ' span ' is uppercase and can be log verified.
• Constantly find the law, summarize and refine, find the best lazy method, try to avoid manual labor.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.