How to prevent a button to submit?

Question

I am new to jquery/javascript so maybe I am taking a complete wrong path here.

I have a button within my form, and its job is just doing some DOM manipulation. Certainly not submitting the form.

<button id="add_deals_button" class="btn btn-success"></button>

In my js file I have written the following:

$(document).ready(function () {  
  $("#add_deals_button").click(add_deals)
});

When I click the button, it does the DOM manipulation, but also it sends a POST, hence submits the form. How do I prevent the button from submitting anything?

UPDATE:

function add_deals(e){
    $('#hidden_deals').clone().attr({'class':'none'}).appendTo('#deal_status tbody')

}

Thanks,

Raminson, I dont think this is a duplicate, as I am trying to prevent submitting altogether. Your suggested duplicate, doesn't do that. Please remove this before the question is closed. — Houman, Jul 22 '12 at 10:19

score 5 · Accepted Answer · answered Jul 22 '12 at 10:16

5

The simplest way is to add this to the button tag:

type="button"

E.g.:

<button id="add_deals_button" type="button" class="btn btn-success"></button>

By default, the type of button elements is "submit", which submits the form. But if the type is "button", it's just a button, not a form-submission button.

answered Jul 22 '12 at 10:16

T.J. Crowder

1,031,962
187
1,923
1,875

This has worked. And its a clean solution. Thank you – Houman Jul 22 '12 at 10:23

score 1 · Answer 2 · answered Jul 22 '12 at 10:16

Depending on this that you have bound to the click and what you want to achieve you could return false;

 $("#add_deals_button").click(function(e) {
      // do your actions
      add_deals();
      return false;
 });

This will, in jQuery do the same as

 $("#add_deals_button").click(function(e) {
      // do your actions
      e.preventDefault();
     e.stopPropagation();          
 });

How to prevent a button to submit?

2 Answers2