664

I've got a form, with 2 buttons

<a href="index.html"><button>Cancel changes</button></a>

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

I use jQuery UI's button on them too, simply like this

$('button').button();

However, the first button also submits the form. I would have thought that if it didn't have the type="submit", it wouldn't.

Obviously I could do this

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

But is there a way I can stop that back button from submitting the form without JavaScript intervention?

To be honest, I used a button only so I could style it with jQuery UI. I tried calling button() on the link and it didn't work as expected (looked quite ugly!).

2
  • Possible duplicate of HTML button to NOT submit form Mar 9, 2016 at 11:16
  • 9
    use <button type="button"> for the one that doesn't submit the form and <input type="submit"> for the other one. Then catch it with jquery $('#formID').submit(function(e){});
    – Airwavezx
    May 16, 2017 at 11:04

8 Answers 8

1474

The default value for the type attribute of button elements is "submit". Set it to type="button" to produce a button that doesn't submit the form.

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

In the words of the HTML Standard: "Does nothing."

3
  • 2
    Everyone: Please read html.spec.whatwg.org/multipage/syntax.html#unquoted
    – Josh Lee
    Nov 1, 2018 at 15:03
  • also, an <input type=text> will submit the form when you press enter if there is a button with the attribute type="submit" (or empty) in the same form Nov 18, 2020 at 19:33
  • Thank you so much! I've been stuck on this for a while, when the answer itself was simple. Simple is key!
    – Halo
    Nov 17, 2021 at 22:05
245

The button element has a default type of submit.

You can make it do nothing by setting a type of button:

<button type="button">Cancel changes</button>
1
  • 1
    @B.ClayShannon Not really. You could use server-side code to return the same page when the button is clicked, but it'll still reload the page. Ultimately the button is part of the document and so the only ways to tell the browser how you want it to act are HTML and JavaScript.
    – s4y
    Jun 22, 2015 at 18:41
19

Just use good old HTML:

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

Wrap it as the subject of a link, if you so desire:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Or if you decide you want javascript to provide some other functionality:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
12
  • 7
    Using a standard button control with proper type attribute is "good old html," and creates much simpler markup.
    – Roman
    Jul 23, 2010 at 2:46
  • It's clearly not simpler if in some browsers it has a default type of submit and in others it has a default type of button. Heck, even just having the default type of submit complicates things more than is necessary IMO. There should be markup that easily provides a button that does nothing. And there is: <input type="button" /> Jul 23, 2010 at 3:01
  • +1 I've used this exact technique lots of times, and it has always worked well for me. One variant is if you need to cancel the postback event for a server-side button based upon some client-side calculation, you can include window.event.returnValue = false; in your code that executes in the client-side onclick event for your button... that is, if using a custom validator control doesn't cut the mustard for you :)
    – Adam McKee
    Jul 23, 2010 at 3:05
  • 1
    @JGB146: Just because not all browsers default to the same value doesn't mean they won't respect the correct type if it's set manually (as is suggested by jleedev. Not to mention the questions specifically asks for a way to do it without JavaScript while your answer doesn't take that into account.
    – Roman
    Jul 23, 2010 at 4:24
  • 11
    @JGB146: Button is a container in HTML. That allows you to place things like images or tables (not sure why you'd do this, but you could) etc while input doesn't support that. There is a difference between the two, and each one has their appropriate use case.
    – Roman
    Jul 23, 2010 at 14:06
13

Yes, you can make a button not submit a form by adding an attribute of type of value button:

<button type="button"><button>
9
<form onsubmit="return false;">
   ...
</form>
2
  • Your answer disables all traditional ways to submit the form, not just one button. OP's question was more in regard of disabling only specific buttons, but keeping the form submittable. Jul 18, 2021 at 9:21
  • If you have 5 buttons, and you want to submit only when click on one of them, this will not work. This will make the form do nothing when press any of the buttons Mar 16 at 11:47
5

Honestly, I like the other answers. Easy and no need to get into JS. But I noticed that you were asking about jQuery. So for the sake of completeness, in jQuery if you return false with the .click() handler, it will negate the default action of the widget.

See here for an example (and more goodies, too). Here's the documentation, too.

in a nutshell, with your sample code, do this:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

As an added benefit, with this, you can get rid of the anchor tag and just use the button.

1
  • Curiously enough, adding e.preventDefault() does nothing to stop the submission (where it starts with function(e)).
    – Sablefoste
    Sep 6, 2017 at 17:47
1

Without setting the type attribute, you could also return false from your OnClick handler, and declare the onclick attribute as onclick="return onBtnClick(event)".

-3
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.