jquery uses Ajax to quickly bulk submit form data _jquery

When there are many form data items, it becomes inefficient to manually get the values of the table items, combined with the function serialize () provided by jquery, which enables you to quickly get data and submit the form data.

Take a look at the following form:

<form id= "FM" > <table> <tr> <td> name </td> <td> <input type= "text" name= "name "/> </td> </tr> <tr> <td> ages </td> <td> <input type=" text "name=" age " /> </td> </tr> <tr> <td> password </td> <td> <input type= "password" name= "pas Sword "/> </td> </tr> <tr> <td> sex </td> <td> <input type=" Radio "name= "Sex" value= "male"/> Male <input type= "Radio" name= "Sex" value= "female"/> Women </td> </tr> <tr&gt
  ; <td> region </td> <td> <select name= "area" > <option value= "heping" > Heping District </option> &l T;option value= "Nankai" > Nankai District </option> <option value= "xiqing" > Xiqing District </option> <option value= "hex
  I "> Hexi </option> </select> </td> </tr> <tr> <td> Love </td> <td> <input type= "CheCkbox "Name=" hobby[] "value= movie"/> Movie <input type= "checkbox" Name= "hobby[" "value=" Music "/> Musical <input t ype= "checkbox" Name= "hobby[]" value= "basketball"/> Basketball </td> </tr> <tr> <td> Personal Introduction &LT;/TD&G
  T <td> <textarea name= "Intro" ></textarea> </td> </tr> <tr> &LT;TD&GT;&LT;/TD&G
  T 
 <td> <input type= "button" value= "submitted" id= "Submit"/> </td> </tr> </table> </form>

We can use the Custom function Getformdata () to get the data of the form, see the following example:

$ (function () {
 $ (' #submit '). Click (function () {
 //select form
 var form = $ (' #fm ');
 Get the form data
 var data = getformdata (form);
 Send Ajax request
 $.post (' test.php ', data,function (data) {
  console.log (' OK ');
 })
 ;});

The implementation of Getformdata () is simple:

function Getformdata (form) {
 var data = Form.serialize ();
 data = decodeURI (data);
 var arr = data.split (' & ');
 var item,key,value,newdata={};
 for (Var i=0;i<arr.length;i++) {
 item = arr[i].split (' = ');
 key = Item[0];
 Value = item[1];
 if (Key.indexof (' [] ')!=-1) {
  key = Key.replace (' [] ', ');
  if (!newdata[key]) {
  Newdata[key] = [];
  }
  Newdata[key].push (value);
 } else{
  Newdata[key] = value;
 }
 }
 return newdata;
}

The data received by test.php will be:

Array
(
 [name] => 3241324
 [age] => m_admin
 [password] => 123
 [sex] => male
 [Area] = > heping
 [Hobby] => Array
 (
  [0] => movie
  [1] => music
 )
 [intro] => 321432423< c13/>)

And the normal form of submission of the data format is the same, we can be very convenient to deal with!

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.