HTML Form With Multiple buttons - Not calling Jquery function

Question

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 ?

Can you post your HTML where you've included jQuery? Also, is the event bound within document.ready? — Sang Suantak
– Sang Suantak, Commented Aug 9, 2013 at 6:25
Am not getting ur 1st one ! And for second question No ! Separate event not in document.ready — Peru
– Peru, Commented Aug 9, 2013 at 6:28
You could use the attribute type="button" for the buttons html. This will stop it from submitting. — Jeemusu
– Jeemusu, Commented Aug 9, 2013 at 6:31
For the 1st one, i mean the HTML code (script tag) where you've referenced jQuery library. As for the second, what @Razz has answered. — Sang Suantak
– Sang Suantak, Commented Aug 9, 2013 at 6:31
I replicated your code and do not experience the problem you describe. — Quentin
– Quentin, Commented Aug 9, 2013 at 6:32

Razz · Accepted Answer · 2013-08-09 06:29:20Z

1

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;
    });
});

answered Aug 9, 2013 at 6:29

Razz

4,0151 gold badge20 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeemusu Over a year ago

I would recommend using e.preventDefault(); instead of return false;

Razz Over a year ago

And to also use $('#edit').on('click', function(){...}); instead of document.

m1k1o · Accepted Answer · 2013-08-09 06:30:03Z

0

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;
  });
});

answered Aug 9, 2013 at 6:30

m1k1o

2,36416 silver badges27 bronze badges

Comments

L4reds · Accepted Answer · 2013-08-09 06:32:30Z

0

try this,

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

answered Aug 9, 2013 at 6:32

L4reds

4122 gold badges5 silver badges21 bronze badges

Comments

Taj Morton · Accepted Answer · 2013-08-09 06:33:00Z

0

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

answered Aug 9, 2013 at 6:33

Taj Morton

1,6384 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

HTML Form With Multiple buttons - Not calling Jquery function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related