CODEWITHSUNDEEP
jqueryeventskeypress
Spas Bobchev
Spas Bobchev

Reputation: 104

jQuery keypress event for a form that's a resulf of an ajax call

Clicking a link in my page submits an ajax request and loads the response in a modal dialog window. That response contains a form with id 'ModalForm'. What I am trying to achieve is to prevent the default form behavior of the 'Enter' key for this specific form and replace it with execution of a JS function that I wrote. Unfortunately I can't get it to work nor I receive an alert message. Here's my code:

jQuery(function (){
    jQuery('#ModalForm').keypress(function(e){
        alert(e.keyCode);
        if (e.keyCode == 13) {
            modalWindowSubmit();
        }
    });

    jQuery('#ModalForm').on('keypress', (function() {
        alert('hi');
    });

});

Thanks in advance!

Upvotes: 0

Views: 1078

Answers (2)

Scott Selby
Scott Selby

Reputation: 9570

You have to use KeyUp - keycode is not known at keypress time

  jQuery(function (){
   jQuery('#ModalForm').keyup(function(e){
    alert(e.keyCode);
    if (e.keyCode == 13) {
        modalWindowSubmit();
    }
});

or

  jQuery(document).on('keyup', '#ModalForm', (function(e) {
    alert(e.KeyCode);
  });

.on is typically used to bind elements to events when the element is created dynamically , if that is not the case the first option will work just fine

Upvotes: 0

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

You have to bind the event on the form in the "success" of the ajax call

Upvotes: 1

Related Questions