CODEWITHSUNDEEP
javascriptjquery
Masha
Masha

Reputation: 857

jquery from submit not handled correctly, event.preventDefault() not working

I got the form with the folowing HTML (in modal window using bootbox.js)

<div class="bootbox-body">
    <form id="change_phrase" style="">
        <div class="form-group">
            <label for="phrase_fld">Фраза</label>
            <input type="text" name="dialog_field" class="form-control" id="phrase_fld" placeholder="Enter phrase">
        </div>
    </form>
</div>

I need to handle enter key press while in input field with the following code:

$(document).on('keyup', '#phrase_fld', function(e){
    e.preventDefault();
    e.stopPropagation();
    console.log(e);     
    if(e.keyCode == 13){                    
      $(this).parent().parent().parent().parent().parent().find('button.btn-success').trigger('click');
     }
 });

But when I press enter while in #phrase_fld input field I get my html page reloaded and ?dialog_field=some+new+phrase query string appended to my url in browser. Maybe e.preventDefault() is not working? In my console I see isDefaultPrevented: f. Any ideas how to fix that would be welcome. Thank you.

Upvotes: 1

Views: 192

Answers (2)

YOUNES BELHIT
YOUNES BELHIT

Reputation: 24

Try This Code: 

$('body').delegate('#phrase_fld', 'keypress', function(e) {
        if(e.keyCode === 13) {
            e.preventDefault();
            console.log(e);
            $(this).parent().parent().parent().parent().parent().find('button.btn-success').trigger('click');
        }     
});

Upvotes: -1

Quentin
Quentin

Reputation: 943564

The form submission is not trigged as the default behaviour for the keyup event. It is too late for that.

You need to capture it during either the keydown or keypress event.

Upvotes: 2

Related Questions