jQuery click event not triggered on button inside form

Question

I have a button inside a form like this:

<form>
   <input type="text" />
   <input type="password" />
   <button type="button" class="btn-login">Log in</button>
 </form>

I am trying to trigger the button's click event by doing this in the js:

$(document).ready(function () {
     $('.btn-login').live("click", function () {
          alert("Button clicked!");
      });
});

But for some reason, this is not working.

If I remove the <form></form> that is around the textboxes and button, the click event is triggered, but this also means that my page is not showing properly, so I wonder if there is a way to trigger the button's click event when inside the form.

Dunno why wrapping it in a <form> tag would break it but try using .on('click' instead of .live — Bill
– Bill, Commented Apr 24, 2013 at 12:37
as per http://www.w3schools.com/tags/tag_button.asp Tips and Notes Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form. — rahul maindargi
– rahul maindargi, Commented Apr 24, 2013 at 12:52

Sachin · Accepted Answer · 2013-04-24 12:45:41Z

3

If you are using latest version of Jquery the try on instead of live as it is deprecated in version 1.9. If you are using version 1.7 then your code will work.

$(document).ready(function () {
     $('.btn-login').on("click", function () {
          alert("Button clicked!");
      });
});

JS Fiddle .on() example

JS Fiddle .live() example

edited Apr 24, 2013 at 12:45

answered Apr 24, 2013 at 12:39

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

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

1 Comment

bale3 Over a year ago

Thanks, this did the trick , will accept the answer as soon as I can!

Mysteryos · Accepted Answer · 2013-04-24 12:40:19Z

1

.live Function() has been removed as from jQuery 1.9 . Reference: http://api.jquery.com/live/

Please use .on() function for binding events. Reference: http://api.jquery.com/on/

Solution:

$(document).ready(function () {
     $('.btn-login').on("click", function () {
          alert("Button clicked!");
      });
});

answered Apr 24, 2013 at 12:40

Mysteryos

5,8013 gold badges35 silver badges54 bronze badges

Comments

Sudesh · Accepted Answer · 2013-04-24 12:45:23Z

0

I think below code should work for you

$(document).ready(function () {
     $(document).delegate('.btn-login', "click", function () {
          alert("Button clicked!");
      });
});

It uses delegate from jquery, so even if it is added later in DOM via ajax, this function would work.

answered Apr 24, 2013 at 12:45

Sudesh

1,1693 gold badges14 silver badges29 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2013-04-24 12:45:40Z

0

You can migrate 1.1.0 to 1.9.1 to use .live()

$(document).ready(function () {
     $('.btn-login').live("click", function () {
          alert("Button clicked!");
      });
});

[Working Example] (http://jsfiddle.net/3hQbG/)

answered Apr 24, 2013 at 12:45

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Comments

Xotic750 · Accepted Answer · 2013-04-24 13:20:17Z

My guess is that you are using a newer version of jquery, I tested with 1.9.1 and jQuery.live does not work (removed jquery 1.9). A simple change to jQuery.on and it sprang immediately to life.

<form>
    <input type="text" />
    <input type="password" />
    <button type="button" class="btn-login">Log in</button>
</form>

$(document).ready(function () {
    $('.btn-login').on("click", function () {
        alert("Button clicked!");
    });
});

on jsfiddle

As a note to comments, this is what the W3C has to say

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

The Button Element - W3C

This article demonstrates some of the differences between button and input

And what of W3cschools advice?

Tips and Notes Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

W3cschools: HTML Tag

w3cschools are not an authorative body. As far as I can tell, the only browsers that had real issues were IE6 & IE7, so I guess their advice is a little out of date. It is possible that there are others but I could not find anything concrete. the best I could find was on MDN <\button>

IE7 has a bug where when submitting a form with Click me, the POST data sent will result in myButton=Click me instead of myButton=foo. IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7 This bug has been fixed in IE8

as per http://www.w3schools.com/tags/tag_button.asp Tips and Notes Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

rahul maindargi · Accepted Answer · 2013-04-24 12:40:19Z

-1

instead of

<button type="button" class="btn-login">Log in</button>

use

<input type="button" class="btn-login">Log in</input>

answered Apr 24, 2013 at 12:40

rahul maindargi

5,7152 gold badges18 silver badges23 bronze badges

3 Comments

Mysteryos Over a year ago

www.w3schools.com/tags/tag_button.asp It's html5 code, hence valid.

rahul maindargi Over a year ago

as per http://www.w3schools.com/tags/tag_button.asp

Tips and Notes Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

Xotic750 Over a year ago

I don't think w3schools tips are authorative enough that the OP needs to change his element type.

Collectives™ on Stack Overflow

jQuery click event not triggered on button inside form

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related