allow visitor to pick carousel slide number w/ form

Question

I have a jQuery carousel (from Bootstrap) with a lot of slides, and want to be able to pick the slide number by entering a number in an HTML form, like so:

My HTML:

<form id="slide-number" >
  <input type="number" min="0" />
</form>

My jQuery:

jQuery('#slide-number').submit(function(){
            x = parseInt(jQuery('input').val());
            jQuery('.carousel').carousel(x);
            return false;
        })

It works the first time, but the second time I enter a number and press enter to submit, it reloads the page and goes back to the first slide.

I've checked other solutions like binding the carousel function to the action attribute or to onsubmit, but nothing seems to work.

Answer 1

You can use "keypress" function as follows.

$('#slide-number').bind('keypress', function(e) {
if(e.keyCode==13){
    // Enter pressed... do anything here...
}});