Well, this semester the school is offering JSP, which is the JAVA language embedded in HTML. Then today, when I was doing the experiment, I was excited about the extension of the experiment report — using JavaScript to prevent form submission. When I used JS, I didn’t have to display some “fist”, ha ha ha ha, JUST kidding. And then I made a discovery.

1. The form is submitted normally

We all know that in the form form, clicking the button of type submit will submit the form. Of course, a normal button tag will also be used as a submit button. Let’s do a test and look at the following code

<form action="show.html"> <input type="text" name="username" id="username"> <input type="password" name="password" Id ="password"> <input type="submit" value=" submit" >Copy the code

Normally, if we click the button, the page will jump to show.html. We don’t care whether the page can be accepted or not, mainly by testing the page jump to verify whether it is blocked successfully.

2. Block form submission

I came up with two ways to block form submission, and while doing research, I came across a third

  • One is to use the event mechanism to prevent default eventsevent.preventDefault()
  • Bind the submit button to a function inside the functionreturn false
  • usingform 的 onsubmitThe event

There are several ways to bind events with native JS, and I’ve named them method 123 for documentation purposes

  • Get the element and thenelement.onclick = function .....
  • Get the element and then use itaddEventListenerListening to the
  • It’s directly inside the label<button onclick="check()"></button>

I’m going to test it one by one, and Find out what I Find.

2.1 use the event

  1. Method 1
<script> const submit = document.getElementById("submit") function check(e){ e.preventDefault() } submit.onclick = check  </script>Copy the code

The result is very good, block success, the page does not jump

  1. Method 2
    <script>
        const submit = document.getElementById("submit")
        function check(e){
            e.preventDefault()
        }
        submit.addEventListener("click",check)
    </script>
Copy the code

Results are also ideal, block success, the page does not adjust

  1. Methods 3
<script> function check(event){ event.preventDefault() } </script> <form action="show.html"> <input type="text" <input type="password" name="password" id="password"> <input type="submit" value=" submit" id="submit" onclick="check()" > </form>Copy the code

I’m not going to hesitate to jump, but if I look carefully, I realize that I can’t get the event object by default, so I can write it like this

<script> function check(e){ let event = e || window.event event.preventDefault() } </script> <form action="show.html"> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input Id ="submit" onclick="check()" > </form>Copy the code

2.2 return false

  1. Method 1
    <script>
         const submit = document.getElementById("submit")
        function check(){
            return false
        }
          submit.onclick = check
    </script>
Copy the code

No jump, success

2. 2

    <script>
        const submit = document.getElementById("submit")
        function check(){
            return false
        }
          submit.addEventListener("click",check)
    </script>
Copy the code

Failed to block page redirecting. Procedure

  1. Methods 3
<script> function check(){ return false } </script> <form action="show.html"> <input type="text" name="username" <input type="submit" value=" submit button "id="submit" onclick="check()" > </form>Copy the code

Failed to block page redirecting. Procedure

2.3 using the onsubmit

Return false does not jump, but it should be written as return check()

<form action="show.html" onsubmit="return check()"> <input type="text" name="username" id="username"> <input Type ="password" name="password" id="password"> <input type="submit" value=" submit button "id="submit" > </form> <script> function  check(){ return false } </script>Copy the code

The page does not jump, and the blocking succeeds

3. Summary

To conclude the above experiment, use event and bind the event inside the tag, use window.event to get the event object, use return false to prevent it, bind the event inside the tag and use addEventListener, Element. onclick = function… In this form. But I always feel that return false should be feasible no matter how binding, do not know how to do, know friends help me!!