Several Methods and Validations for Form Submission with JavaScript (Must-Read)

In the work, I found that it is convenient to submit forms, many times it works well under IE, but when I opened Firefox, it didn't work, and using the submit button didn't work either. So I used the JS method and it worked, I don't know why. Under the urging of my supervisor, I summarized the following several commonly used methods of form submission.

The first method:Form submission, add the onsubmit event in the form tag to judge whether the form submission is successful

<script type="text/javascript">
   function validate(obj) {
    if (confirm("Submit form"63;")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.oldtoolbag.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> Pay attention to the way of parameter writing-->
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  </form>
</body>

The second method:By using the button to trigger the form submission event onclick="submitForm();", it will ignore the properties of other tags, such as the onsubmit property in the form tag will be invalid. At this time, in order to perform form validation, you can place the validation code inside the submitForm(); method for validation.

<script type="text/javascript">
   function validate() {
    if (confirm("Submit form"63;")) {
      return true;
    } else {
      return false;
    }
   }
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://www.oldtoolbag.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/Also, you can use document.getElementByIdx_x(“the button's id”).click(); to execute the onclick event-->
  </form>
</body>

The third method:Place the onsubmit event inside the submit tag instead of the form tag, at this point the form validation will fail, and clicking the submit button will directly submit the form

<script type="text/javascript">
   function validate() {
    if (confirm("Submit form"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  </form>
</body>

The fourth method:Add the onclick event to the submit button, where the event is used for form submission validation, which is similar to adding an onsubmit event in the form tag

<script type="text/javascript">
   function validate() {
    if (confirm("Submit form"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  </form>
</body>

The fifth method is:

<body>
  <form action="https://www.oldtoolbag.com" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  </form>
 </body>
  <script type="text/javascript">
   function validate() {
      if (confirm("Submit form"63;")) {
        return true;
      } else {
        return false;
      }
}

By clicking the button, the form submission event is triggered, and other tags' attributes will be ignored, such as the onsubmit attribute in the form tag, which will be invalid. At this time, in order to perform form validation, the validation code can be placed in the submitForm(); method for validation

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

This article on several methods and validations (must-read) for submitting forms using JavaScript is all the editor has shared with you. It is hoped that it can provide a reference for everyone and everyone is encouraged to support the Shouting Tutorial.

Basic Tutorial