CODEWITHSUNDEEP
jqueryhtml
Peru
Peru

Reputation: 2971

HTML Form With Multiple buttons - Not calling Jquery function

Am having the below form in HTML 

<form id="test" name="test">
<button id="save" class="small"><i class="icon-plus"></i>save</button>  //KickStart
<button id="edit" class="small"><i class="icon-plus"></i>edit</button>
 <input value=1 type="text" name=Col1 class="Hide">
 <input value=2 type="text" name=Col2 class="Hide">

</form>

JQuery function to be called on button click 

$(document).on("click", "#edit", function (e) {

    return false;
});

But when i click on edit button form Submits and not calling the Jquery function as expected.

Maybe I am missing some property of the form ?

Upvotes: 0

Views: 283

Answers (4)

Taj Morton
Taj Morton

Reputation: 1638

Another solution is to use the preventDefault() function:

$(document).on("click", "#edit", function (e) {
    alert("Hi");
    e.preventDefault();
});

See http://jsfiddle.net/AbP8Z/ and http://api.jquery.com/event.preventDefault

Upvotes: 0

L4reds
L4reds

Reputation: 412

try this,

$(document).ready(function(){
     $("#edit").click(function(e) {
         alert("edit button clicked!");
         return false;
     });
});

Upvotes: 0

m1k1o
m1k1o

Reputation: 2364

If you have the following code in the header, you need to use $(function(){}). This will run code after load page. 

$(function(){
  $("#edit").click(function (e) {
    alert("a");
    return false;
  });
});

Upvotes: 0

Razz
Razz

Reputation: 4005

You will have to wait for the DOM to get ready before binding an event to any element.

All you gotta do is put your code inside a

$(document).ready(function(){
    $(document).on("click", "#edit", function (e) {
        return false;
    });
});

Upvotes: 1

Related Questions