4

I have a form where a button included, when button is clicked the form is submitted, and how to prevent this. for example I just want to show a "alert" when the button is clicked. and put the button outside of form is not a option for me.

and BTW I use bootstrap framework.

    <form class="form-inline" role="form" id="form-area">
        <input type="hidden" name="key" value="dept-area">
        <div class="form-group">
            <input type="text" class="form-control" name="data" placeholder="">
        </div>

        <button class="btn btn-default" id="btn-area">test</button>
    </form>
jgillich
  • 71,459
  • 6
  • 57
  • 85
sureone
  • 831
  • 2
  • 14
  • 25

4 Answers4

5

I don't agree with the javascript answers. They work, but they're not fixing the cause of the problem.

The form is being submitted because the <button> element has a type of submit by default (see the spec here).

You can get around this by putting type="button" in the html like so:

 <button type="button" class="btn btn-default" id="btn-area">
Timothy Jones
  • 21,495
  • 6
  • 60
  • 90
2

Use event.preventDefault();

clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.

 $("#btn-area").click( function(event) {


 event.preventDefault();

     alert("hello ");

});

http://jsfiddle.net/BL3Jk/

Mr7-itsurdeveloper
  • 1,631
  • 2
  • 17
  • 24
0

You can try this:

$('#form-area').submit(function (event) {
    event.preventDefault();
});
Joe
  • 103
  • 1
  • 7
0

You Can use jquery like this

$("#btn-area").click(function(event){
alert("Your alert");
event.preventDefault();
});