Of Stack

jquery form plug in form usage details

  • 2021-07-13 03:52:32
  • OfStack

Traditional form submission is in the form of page jump, but ajax submission is more popular now. If you want to have the simplicity of form submission and the effect of ajax, is there any solution?

How to use it

Two ways to use:

Mode 1 


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   //  Use ajaxForm
   $(function(){
    $("#myForm").ajaxForm(function(){
     $("#output1").html(" Submission Successful ").show();
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value=" Submit ">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

Mode 2 


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery-form.js"></script>
  <script>
   $(function(){
    // Mode 2  And mode 1 Effect 1 Sample 
    $("#myForm").submit(function(){
     //  Use ajaxSubmit
     $(this).ajaxSubmit(function(){
      $("#output1").html(" Submission Successful ").show();
     });
     return false;
    })
   })
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="text" name="username">
   <input type="text" name="password">
   <input type="submit" value=" Submit ">
   <div id="output1" style="display: none"></div>
  </form>
 </body>
 </html>

I feel that the first kind is more convenient by 1 point.
The parameter function () is the callback function after successful submission.

Using this submission method, asynchronous form submission can be realized, which is very convenient. However, it is still a bit unsatisfying. For example, I may want to verify 1 before submitting the form, which can be done manually in addition to the submission action, but it is very troublesome. Does the form plug-in inherit this functionality?

2. options parameters

Above, only one function callback function parameter in form is mentioned, but in fact, it also has one parameter, that is, options. What's the use? 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>

  var options = {
   target:'#output1',   //  Put the contents returned by the server into id For output1 In the element of 
   beforeSubmit: fun1,   //  Callback function before commit 
   success:  fun2,   //  Callback function after submission 
   dataType:     //  Receive the type returned by the server  xml,scrpit,json
  };

  // beforeSubmit It can be verified before 
  function fun1(formData,jqForm,options){
   // formData  Array object that submits values 
   // jqForm  Of the form element jQuery Object, jqForm[0] Is its dom Object 
   //  If the function returns false Block form submission 

   // formData It can be judged that all of them are not empty 
   for(var i=0;i<formData.length;i++){
    if(!formData[i].value){
     alert(" Neither can be empty ");
     return false;
    }
   }

   // jqForm You can judge a situation that is not empty 
   var form = jqForm[0];
   if(!form.name.value){
    alert("name Cannot be empty ");
    return false;
   }

   // fieldValue() You can get the array form of multiple values, such as checkbox
   var value = $('input[name=name]').fieldValue();
   if(!value[0]){
    return false;
   }
  }
  function fun2(responseText, statusText){
   //  According to dataType Different responseText Parsing methods are different, 
   //  Default   responseText
   // xml  responseXml With xml Analyse 
   // json  responseJson
  }

  $(function(){
   // Mode 2  And mode 1 Effect 1 Sample 
   $("#myForm").ajaxForm(options); //  If you want to make options Effective and needs to be passed as a parameter 
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value=" Submit ">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

It can be seen that in the callback function fun1 of beforeSubmit, we have three ways to obtain form data formData, jqForm and fieldValue, which meet various ways to obtain values. fun2, which can prevent the form from submitting an sucess callback by returning false, also has status values and return data from the server, so do what you want.

Related articles: