Submitting a form, restrict to submit button only

Question

I catch my forms submit with:

$('#my-form').submit(function(e){
 //do stuff

Here's my html

<div class="row">
       <div class="columns">
            <button type="submit" class="small right">Save</button>
       </div>
</div>

Also in my form are other buttons for deleting images:

<button class="tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

The problem is, these image buttons submit the form, how can I stop this?

Specify a `type`, otherwise behaviour depends on implementation. Ref: http://www.w3schools.com/tags/att_button_type.asp — blgt, Mar 19 '14 at 12:04

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Option1:

Check

HTML button to NOT submit form

Difference between <input type='button' /> and <input type='submit' />

Option 2: Work around

You need to do preventDefault() for other buttons

Assuming you are deleting using ajax call like below

$('.tiny btn-caption').click(function(e){

  e.preventDefault(); // it will cancel the default form submission behavior

  $.post({
   //Ajax stuff for deleting goes here
  });
});

score 1 · Answer 2 · answered Mar 19 '14 at 12:04

Try this

Buttons like <button>Click to do something</button> are submit buttons.

add type="button" it will restrict form submission

<button type="button" class="tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

score 0 · Answer 3 · edited Mar 19 '14 at 12:02

0

By default <button> will act as a submit button.

Try,

$("#my-form button[type!='submit']").click(function(e){
  e.preventDefault();
});

edited Mar 19 '14 at 12:02

hsz

148,279
62
259
315

answered Mar 19 '14 at 12:01

Rajaprabhu Aravindasamy

66,513
17
101
130

score 0 · Answer 4 · answered Mar 19 '14 at 12:01

You can add remove class for button which deletes images and prevent its action:

<button class="remove tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

JS:

$('#my-form .remove').click(function(){
  // post another form or call ajax method
  return false;
});

score 0 · Answer 5 · answered Mar 19 '14 at 12:06

you need to apply event handlers to the buttons themselves not the whole form

$('#my_form button').click(function(){
//or 
$('.tiny btn-caption, .small').click(function(){

 $.post(url,dataString,function(response){
    //handle resposne
  });

 return false;
});

score -2 · Answer 6 · answered Mar 19 '14 at 12:03

-2

Use the html input submit

<input type="submit" value="Submit">

answered Mar 19 '14 at 12:03

Bharat soni

2,686
18
27

Thank you for your answer, but this doesn't answer the question posted. They wanted to stop buttons from submitting it too. – Deanna Mar 19 '14 at 12:27

Submitting a form, restrict to submit button only

6 Answers6