capture click event of submit button jquery

Question

I am trying to get the click event of a submit button on my form...

<input type="submit" value="Search By Demographics" class="button" id="submitDemo"/>

That is the button that I want to get the event from.

$('#submitDemo').click(
        alert("work darn it!!!!!!!!!!!!!!!!!!!!!!!!!")
        //$("#list").block({ message: '<img src="../../Images/ajax-loader.gif" />' })
    );

This is what I want to do on button click. I want to put a loading image around a div and then unblock later in a different function. Currently the overlay pops up when the page loads instead of onClick. What am I doing

NullPoiиteя · Accepted Answer · 2013-07-16T08:19:22.340

14

try this

$('#submitDemo').live("click",function() {
  // your stuff
});

As @px5x2 pointed that live is deprecate so instead of live use ON

$('#submitDemo').on("click",function() {
  // your stuff
});

edited Jul 16 '13 at 08:19

answered Sep 10 '12 at 17:41

NullPoiиteя

56,591
22
125
143

4

`.live()` is deprecated and removed by jquery version 1.9. – px5x2 Jul 16 '13 at 08:17

score 8 · Answer 2 · answered Sep 10 '12 at 17:40

8

$('#submitDemo').click(function() {
  // do your stuff
});

answered Sep 10 '12 at 17:40

Chuck Callebs

16,293
8
56
71

score 4 · Answer 3 · answered Sep 10 '12 at 17:44

4

You need to run your script when the DOM is ready, as well as providing a callback to the click method:

$(function() {
    $('#submitDemo').click(function() {
        // do your stuff
    });
});

answered Sep 10 '12 at 17:44

Alex

34,899
5
77
90

Best answer. When I first read it I thought "Heck I'm already doing that" but then I looked... – Bob Stein Oct 26 '15 at 19:14

score 3 · Answer 4 · answered Sep 10 '12 at 17:44

You have to encase your code in a function..

$('#submitDemo').click(function(){
    alert("work darn it!!!!!!!!!!!!!!!!!!!!!!!!!")
    //$("#list").block({ message: '<img src="../../Images/ajax-loader.gif" />' })
});

But it is always a good practice to bind the event using on so that it attaches the event handler to the element when that is available.. So

$('#submitDemo').on('click',function(){
    alert("work darn it!!!!!!!!!!!!!!!!!!!!!!!!!")
    //$("#list").block({ message: '<img src="../../Images/ajax-loader.gif" />' })
});

score 2 · Answer 5 · answered Sep 10 '12 at 17:43

2

For form you can also bind submit button click on form.

$("#form_selector").submit(function{
// Do your stuff
})

where 'form_selector' is id of the form of which submit button is clicked.

answered Sep 10 '12 at 17:43

Paritosh Singh

6,288
5
37
56

score 0 · Answer 6 · edited Dec 21 '18 at 00:16

0

You might haven't included the jquery library in your code!

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Dec 21 '18 at 00:16

Taher A. Ghaleb

5,120
5
31
44

answered Dec 21 '18 at 00:13

Bariock

51
7

capture click event of submit button jquery

6 Answers6

Linked