jquery - stop page reload

Question

I have Textbox and Button (Next and Previous) displayed in Lightbox. Currently my page is reloading upon clicking the Enter key. I dont want this to happen.

What i want is, when i click the Enter key, the "Next" button should be clicked without page reload which resides back of lightbox.

I used the following code, but both reload and click on Next button are happening:

$("input").bind('keyup', function(event){
    if(event.keyCode == 13){
        $("#nextbtn").trigger('click');
    }
    event.preventDefault();
    return false;
});

see this post http://stackoverflow.com/questions/155188/trigger-button-click-with-javascript-on-enter-key-in-text-box — sathish, Jan 20 '10 at 05:59

score 5 · Answer 1 · answered Jan 20 '10 at 05:57

Make sure your input button is type of button and not submit

<input type='button'>

Then try this one if keycode is 13 then it will call the nextbtn click event, then truen false so it wont load back.

$("input").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
      $("#nextbtn").click(); 
      return false;
  }
});

score 0 · Answer 2 · answered Nov 03 '13 at 23:14

The problem is somewhere else. As I understand the page is being reloaded because button is in the form and browser threads it as submit button. Please note, that this occures on click event, not on keyup. You can do two things:

First. Assign click event to the button that returns false. Second. Change your input event to keypress instead of keyup and add one more line: e.stopPropagation().

score 0 · Answer 3 · edited Jan 29 '13 at 22:35

0

Put return false statement as soon as you trigger the Next button as follows:

$("input").bind('keyup', function(event){ 
    if(event.keyCode == 13){ 
        $("#nextbtn").trigger('click');
        return false; 
    } 
    event.preventDefault(); 
});

edited Jan 29 '13 at 22:35

Shaihi

3,952
4
27
47

answered Jan 20 '10 at 05:58

Rajeev Ranjan Lal

641
2
7
12

score 0 · Answer 4 · answered Jan 20 '10 at 05:59

If I'm understanding your correctly, I think you just need to adjust your lightbox setup to use an iFrame. If you are just using a standard DOM element, the form submission is going to trigger a page load. The other way around that would be to use the jquery.form plugin to do AJAX form submissions.

jquery - stop page reload

4 Answers4