How to prevent form input to reload a page when receiving `Enter` key

Question

I have a HTML5 form as follows, which is styled with Bootstrap3 and contains a range input and a number input. The two inputs are linked so that whenever I change the range value, the number input is updated and vice versa.

What's bothering me is that when I change the number input value and hit the Enter key, the whole web page reloads and this wipes out all other data loaded into the page with JavaScript.

My questions is, how can I change the HTML/code to disable this reloading behavior?

Thanks.

    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-6">
                <input type="range" class="policy_slider" name="demandRange" min="0.1" max="10" value="1" oninput="this.form.demandInput.value=this.value"/>
            </div>
            <div class="col-xs-1">
                <input type="number" name="demandInput" min="0.1" max="10" value="1" step="any" oninput="this.form.demandRange.value=this.value"/>
            </div>
        </div>
    </form>

Answer 1

As there are already plain old JS solutions, my answer is based on JQuery. Also, Bootstrap JS requires Jquery. So try this:

$("form").keypress(function(e) {
  //Enter key
  if (e.which == 13) {
    return false;
  }
});

If you have multiple forms in your page use this :

 $("#form_id").keypress(function(e) {
      //Enter key
      if (e.which == 13) {
        return false;
      }
    });

where form_id is the id specified to your form something like this: <form id="form_id">...</form>

Courtesy: http://www.paulund.co.uk/how-to-disable-enter-key-on-forms

Answer 2

Set the form submit to use javascript and "return false". Afterwards, you can use another function to do the actual submit.

<form class="form-horizontal" onSubmit="return false;">

JSFIDDLE: http://jsfiddle.net/biz79/m3veL3uh/