Several methods and verification of form submission using JS-JS Tutorial-php.cn

Several methods and verification of form submission using JS

高洛峰

Release： 2016-12-16 15:16:23

Original

1348 people have browsed it

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>

Copy after login

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>

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

Copy after login

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>

Copy after login

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

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

For more methods to submit forms using JS and verification-related articles, please pay attention to the PHP Chinese website!