basic html text form

Question

I want a text form for entering a string which is later read by javascript.

<form style='margin:10px;'> 
Input Value: <input type="text" value="3" id="input" name="input"/>
</form>

I'm noticing that when I press enter while it's selected causes the page to be reloaded. This is not what I want. How do I make it not reload the page when the form is "submitted"?

possible duplicate of [How to prevent ENTER keypress to submit a web form?](http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form) — Robert Koritnik, Apr 28 '11 at 08:12
Duplicates: http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form, http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter, http://stackoverflow.com/questions/1563062/jquery-prevent-form-submition-with-enter-key ... — Robert Koritnik, Apr 28 '11 at 08:13
Possible duplicates are actually: http://stackoverflow.com/search?q=form+prevent+enter — Robert Koritnik, Apr 28 '11 at 08:15

score 1 · Accepted Answer · answered Apr 28 '11 at 08:15

1

Do you need the <form> tags? They don't seem to be doing anything. If you remove them you will no longer get that submission behaviour when you hit enter.

answered Apr 28 '11 at 08:15

benb

733
7
18

score 0 · Answer 2 · answered Apr 28 '11 at 08:12

Pressing enter is submitting the form. You can use Javascript to prevent the form from being submitted - one way of doing that is by using a submit button:

<input type="submit" onsubmit="formhandle(); return false;">

Create a formhandle() function in Javascript to do the processing you want to do. Returning false should prevent the form from being posted back to the server - however, that doesn't always work. There's more detailed information on preventing default actions in browsers here:

http://www.quirksmode.org/js/events_early.html

score 0 · Answer 3 · answered Apr 28 '11 at 08:24

You have to catch the form send with JScript and send it to the server with ajax

<form style='margin:10px;' id='formID'> 
Input Value: <input type="text" value="3" id="input" name="input"/>
</form>

the JQuery (you can use Prototype or pure JS if you want) code goes a litte something like this

$('#target').submit(function() {
  $.ajax({
    type: 'POST',
    url: url, 
    data: data,
    success: success,
    dataType: dataType,
  });
  return false;
});

The return false prevents the page from reloading. The documentation can be found here

basic html text form

3 Answers3