Why am I unable to call the jQuery function?

Question

I'm using jquery-1.9.1.min.js. My HTML is as follows:

<div id="practice_sheet">
    <form name="manage_practice_sheet" id="manage_practice_sheet" action="practice_sheet.php" method="post" >
blah blah blah
blah blah blah
blah blah blah
blah blah blah
<input type="submit" name="btn_submit" id="btn_submit" value="{$submit_value}" class="submit c-btn">
</form>
</div>

The jQuery code is as follows :

$('#practice_sheet form').on('submit', function() { alert("Hello");
    if($.active > 0) { //or $.active 
        request_inprogress();
        return false;
    } else {
     $('.submit').attr('disabled', 'disabled'); 
     show_request('#practice_sheet_loader');
     $('html, body').animate({
         scrollTop: $('#practice_sheet_error_msgs').offset().top
     }, 600);   

     var op = $('#op').val();

     var practice_sheet_category_id = $('#hidden_practice_sheet_category_id').val();


     $.ajax({
         type: $(this).attr('method'),
         url: $(this).attr('action'),
         data:$(this).serialize(),
         dataType: 'json',
         success: function(responseText) { 
         $('.submit').removeAttr('disabled', 'disabled');         
         remove_request('#practice_sheet_loader');
         $.each(responseText, function(array_key, array_val) { 
         if(array_key=='error_message') {
                var error = clean_error_messages(array_val);
                $('#practice_sheet_error_msgs').fadeIn('fast');
                $('#practice_sheet_error_msgs').html(error);
         } else if(array_key=='success_message') {
           if(op=='add')
             document.location.href ="practice_sheet.php?add_practice_sheet_suc=1&op=&practice_sheet_category_id="+practice_sheet_category_id;
           else           
             document.location.href ="practice_sheet.php?edit_practice_sheet_suc=1&op=&practice_sheet_category_id="+practice_sheet_category_id;
           return false;
         }
        });

     } 
     }); 
     return false;
    }
});

I'm not understanding why I'm not able to call this function on form submit. I tried replacing live() with on() but it didn't work. Can you help me with this? Thanks in Advance.

is your event registration inside document.ready? check this http://jsfiddle.net/6qDRk/ — PSL, Aug 09 '13 at 15:08
I think you need to add this to document ready. All you've done here is created a function to register a listener, you need to run this at document.ready — DavidB, Aug 09 '13 at 15:09
When in doubt, create a JSfiddle... you may just be missing the document ready (or preferably the newer `$(function(){...});` syntax — iCollect.it Ltd, Aug 09 '13 at 15:09

score 2 · Answer 1 · answered Aug 09 '13 at 15:10

2

First, remember to put your code on the page load event:

$(function () {
   // All your stuff here.
});

Second, as you're overriding the form submit default behavior, you need to stop it:

// Add this to your first line within the click event handler:
e.preventDefault();

answered Aug 09 '13 at 15:10

emerson.marini

9,331
2
29
46

1

and the return false at the end of the function does not do the same? – mplungjan Aug 09 '13 at 15:11
You have an action defined for the form. I can be wrong, but I think this comes first. – emerson.marini Aug 09 '13 at 15:12
2

http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object. – mplungjan Aug 09 '13 at 15:13

score 0 · Answer 2 · edited Aug 09 '13 at 15:12

0

I think your form is submitting, that's why function is not executed, try to preventDefault, and then submit it at the end of your function if needed (but as i can see, you return false anytime, so maybe you don't need it...):

$('#practice_sheet form').on('submit', function(e) { 
   e.preventDefault();
   //.... Your code here
});

edited Aug 09 '13 at 15:12

mplungjan

169,008
28
173
236

answered Aug 09 '13 at 15:10

Robin Leboeuf

2,096
1
13
14

Why am I unable to call the jQuery function?

2 Answers2