jquery - stop page reload

Question

hi,

I have Textbox and Button(Next and Previous) displayed in Lightbox. currently my page is reloading on clicking Enter button. I dont want this to happen.

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

I used following code, but both reload and click on Next button is happening

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

Answer 1

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;
  }
});

Answer 2

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(); });

Answer 3

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.