Several ways to submit forms using JavaScript-JS Tutorial-php.cn

Several ways to submit forms using JavaScript

黄舟

Release： 2017-11-18 14:53:28

Original

12629 people have browsed it

We often use form forms in our work. I believe everyone is familiar with them. There are many ways to submit forms. JavaScriptWhat are the methods of submitting forms? Today I will show you Introducing several methods of submitting forms in JavaScript!

The first way: For form submission, add onsubmit event in the form tag to determine whether the form submission is successful

<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net" onsubmit="return validate(document.getElementByIdx_x(&#39;myText&#39;));"> <!—参数的这种写法注意下-->
  
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  
  </form>
</body>

Copy after login

The second way: Trigger the form submission event through the button button onclick="submitForm();", the # in other tags will be ignored ##Attributes, such as the onsubmit attribute in the form tag is invalid. At this time, in order to perform form verification, the verification code can be placed in the submitForm(); method for verification.

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
   
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net" id="myForm">
  
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
  
  </form>
</body>

Copy after login

The third way: Put the onsubmit event in the submit tag instead of the form tag. At this time, the form verification fails. Click the submit button to form directly Submit

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  
  </form>
</body>

Copy after login

Fourth way:Add an onclick event to the submit button, where this event is used for verification of form submission, and the function is similar to that in the form tag Added the same onsubmit event

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  
  </form>
</body>

Copy after login

The fifth way:

<body>
  <form action="http://www.jb51.net" id="myForm">
  
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  
  </form>
 </body>
 
  <script type="text/javascript">
  
   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

Copy after login

Trigger the form submission event through the button button onclick="submitForm() ;" will ignore the attributes in other tags. For example, the onsubmit attribute in the form tag will be invalid. At this time, in order to perform form verification, you can place the verification code in the submitForm(); method for verification

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
  
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

Copy after login

Summary:

Through the introduction of this article, we know that there are many ways to submit forms in JavaScript. Each method is different. You can choose one according to your own needs. I hope it will be helpful to your work!

Related recommendations:

Several methods and verification of using JS to submit forms

js submission form is rejected by php, how to solve it?

Brief description of how to submit a form using JavaScript (Using JavaScript Submit Form)

The above is the detailed content of Several ways to submit forms using JavaScript. For more information, please follow other related articles on the PHP Chinese website!