CODEWITHSUNDEEP
javascripthtmljqueryjquery-uibutton
alex
alex

Reputation: 490489

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

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!).

Upvotes: 700

Views: 495662

Answers (8)

Geoffrey Githaiga
Geoffrey Githaiga

Reputation: 389

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

<button type="button"><button>

Upvotes: 17

Josh Lee
Josh Lee

Reputation: 177775

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."

Upvotes: 1529

DennisVM-D2i
DennisVM-D2i

Reputation: 488

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

Upvotes: 1

zzjove
zzjove

Reputation: 195

<form onsubmit="return false;">
   ...
</form>

Upvotes: 9

Andrew
Andrew

Reputation: 13

  <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
        }
        }

        ?>

Upvotes: -4

TCCV
TCCV

Reputation: 3182

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.

Upvotes: 5

s4y
s4y

Reputation: 51735

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>

Upvotes: 250

Jeffrey Blake
Jeffrey Blake

Reputation: 9709

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();"/>

Upvotes: 19

Related Questions