Home > Article > Web Front-end > Several methods and verification of form submission using JS

Several methods and verification of form submission using JS

高洛峰Original: 2016-12-16 15:16:231332browse

I discovered the problem of convenient form submission at work. Many times, the submission is fine under IE, but problems occur under Firefox. Using the submit button fails, so the method of using JS succeeds. I don’t know why. Under the urging of the instructor, I summarized the following common methods for form submission.

The first way: form submission, add the 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.php.cn" 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();", which will be ignored Remove the attributes in other tags. For example, the onsubmit attribute in the form tag will become 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.php.cn" 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 and the form is submitted directly

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

The fourth way: Add the onclick event to the submit button , where this event is used for verification of form submission. The function is similar to adding the onsubmit event in the form tag.

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

The fifth way:

<body>
  <form action="http://www.php.cn" 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>

For more methods to submit forms using JS and verification-related articles, please pay attention to 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：The difference between js form submission and submit submissionNext article：The difference between js form submission and submit submission

See more

Several methods and verification of form submission using JS

Related articles