Home > Article > Web Front-end > Several ways to submit forms using JavaScript

Several ways to submit forms using JavaScript

黄舟Original: 2017-11-18 14:53:2812573browse

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>

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>

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>

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>

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;
      }
}

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：asm.js & webassembly-WEB high performance computingNext article：asm.js & webassembly-WEB high performance computing

See more

Several ways to submit forms using JavaScript

Related articles