Syntax error How to prevent buttons from submitting forms in HTML?

How to prevent buttons from submitting forms in HTML?

To prevent forms from being submitted, we can use the onsubmit property. We can also use the event.preventDefault() method ?

  • Prevent buttons from submitting forms using the onsubmit property
  • Prevent buttons from submitting forms using event.preventDefault()

Prevent buttons from submitting forms using the onsubmit property

We can prevent form from submitting using the onsubmit property as shown below ?

<form onsubmit="return false;">

We have returned false above in the <form> tag itself to prevent form from submitting.

Example

Let us see the complete example ?


<!doctype html>
<html lang="en">
<body>
   <h1>Details</h1>
   <form onsubmit="return false;">
      <p>Select your preferred subject:</p>
      <div>
         <input type="radio" id="maths" name="subject" value="maths">
         <label for="maths">Maths</label>
         <input type="radio" id="science" name="subject" value="science">
         <label for="science">Science</label>
         <input type="radio" id="english" name="subject" value="english">
         <label for="english">English</label>
      </div><br>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

Output

Select any Subject radio button above and click Submit. It won't get submitted ?

Prevent buttons from submitting forms using event.preventDefault()

We can prevent form from submitting using the event.preventDefault() method ?

<form onsubmit="event.preventDefault();">

Example

Let us now see the complete example ?


<!doctype html>
<html lang="en">
<body>
   <h1>Details</h1>
   <form onsubmit="event.preventDefault();">
      <p>Select your preferred subject:</p>
      <div>
         <input type="radio" id="maths" name="subject" value="maths">
         <label for="maths">Maths</label>
         <input type="radio" id="science" name="subject" value="science">
         <label for="science">Science</label>
         <input type="radio" id="english" name="subject" value="english">
         <label for="english">English</label>
      </div><br>
      <div>
         <button id="submit" type="submit">Submit</button>
      </div>
   </form>
</body>
</html>

Output

Select any Subject radio button above and click Submit. It won't get submitted ?

Updated on: 2022-10-25T07:02:55+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements