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,

Answer 1

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.