Can I make a <button> not submit a form using jQuery?

Learn, how can I make a <button> not submit a form using jQuery?
Submitted by Pratishtha Saxena, on September 17, 2022

Prerequisite: Adding jQuery to Your Web Pages

Yes, we can of course make a button to not submit the form details on clicking on it. This can either be done using basic HTML or by involving jQuery for it. This task is quite simple as we use HTML for it.

You might be wondering, how it can be done using HTML. While creating the button for the form, make sure that the type of the button is not set to submit. If yes, then it will surely submit the form on clicking. Also, if the type of the button is not specified, then also it takes the submit type as its default. Hence, for this make sure that the button is set to type=button. This will make the button just a clickable button not doing anything.

Syntax:

<button type="button">Submit</button>

A simple submit button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  
  <body>
    <h2>Make a Button Not Submit The Form Using jQuery</h2>
    <p>The below given button will not submit the following form.</p>
    <hr>
    <h4>FORM</h4>
    <label>Name: </label><input type="text"><br><br>
    <label>Age: </label><input type="number"><br><br>
    <label>Gender: </label><input type="radio">Male <input type="radio">Female<br><br>
    <button type="submit">Submit</button>
  </body>  
</html>

Making button not submit form

But, if this task has to be done using jQuery, then also there is a way for this using it. Similar to the HTML, we need to specify the type of the button as non-submit when clicking on it. Therefore, this can be done by defining, the button[type!=submit] as its condition when it is clicked and returning false for it in its further execution. This way we can set the button to not submit the form when clicked.

Syntax:

$('button[type!=submit]').click();

Example for making a button "not submit" form

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Make a Button Not Submit The Form Using jQuery</h2>
    <p>The below given button will not submit the following form.</p>
    <hr>
    <h4>FORM</h4>
    <label>Name: </label><input type="text"><br><br>
    <label>Age: </label><input type="number"><br><br>
    <label>Gender: </label><input type="radio">Male <input type="radio">Female<br><br>
    <button type="submit">Submit</button>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button[type!=submit]').on('click', function() {
            return false;
        });
    });
  </script>
</html>