127

I am looking for the neatest way to create an HTML form which does not have a submit button. That itself is easy enough, but I also need to stop the form from reloading itself when submission-like things are done (for example, hitting Enter in a text field).

nikodaemus
  • 1,918
  • 3
  • 21
  • 32
Matt Roberts
  • 1,359
  • 2
  • 8
  • 8
  • Do you want it never to submit? – UpTheCreek Nov 30 '09 at 07:06
  • If you have just a
    with a single that is a text field it shouldn't submit when you hit enter, should it?
     – Zack The Human Nov 30 '09 at 07:24
  • I want it to submit upon some other condition (in fact hitting a certain button). The problem is that I have been unable to get the 'enter while in text field' behaviour of posting/getting to the same url to not happen. So my carefully created form, where you need to do X, Y and Z to get it to submit can be erroneously submitted by the user hitting enter. – Matt Roberts Dec 01 '09 at 02:34

8 Answers8

264

You'll want to include action="javascript:void(0);" to your form to prevent page reloads and maintain HTML standard.

Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • 4
    Just spent 2 days trying to suppress the submit button default action when enter is pressed, because although the action took place, the page ended up reloading (Firefox). Adding the javascript void as action on the form fixed it. Thanks for that. – Tony Payne Jul 09 '15 at 07:50
  • thanks for this additional answer. this still works - but is this still the "state of the art" solution in 2016? – low_rents Jun 24 '16 at 12:12
  • 1
    @low_rents I still use it all the time and haven't personally found a better solution. – Dutchie432 Jun 27 '16 at 21:07
  • 1
    Thank you for the precise and a great solution to resolve the reloading of page while hitting enter key :) Best solution. – Imran Rafiq Rather Jan 17 '20 at 06:48
52

Add an onsubmit handler to the form (either via plain js or jquery $().submit(fn)), and return false unless your specific conditions are met.

Unless you don't want the form to submit, ever - in which case, why not just leave out the 'action' attribute on the form element?

K Prime
  • 5,809
  • 1
  • 25
  • 19
  • 177
    A form without an `action` attribute is not a form, according to standards - and will actually cause a page reload in some browsers.. I've found that `action="javascript:void(0);"` works well. – Dutchie432 Oct 17 '11 at 20:14
  • Dutchies answer works perfectly. Firefox was just refreshing the page. – IAmGroot Jan 06 '12 at 16:41
  • 1
    @Dutchie432 should make this into an answer instead of a comment. Then it would make its way to the top where it belongs. Alternatively, KPrime could adjust his answer, since omitting the action did not work for me... – sage Oct 28 '12 at 15:57
  • Using jQuery to add an onsubmit handler might cause the form to be still submitted on slow connections, where jquery is loaded after the click has happened already. – user31782 Dec 30 '21 at 18:26
  • I prefer both:
    That triggers a function to send the mail or something, and page does not reload or do anything. The advantage is the form still handle html5 warnings of empty fields and patterns, etc. (just made that up with your answers and works like charm).
     – user2033838 Feb 08 '22 at 05:10
12

Simply add this event to your text field. It will prevent a submission on pressing Enter, and you're free to add a submit button or call form.submit() as required:

onKeyPress="if (event.which == 13) return false;"

For example:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
GenericMeatUnit
  • 477
  • 4
  • 9
7

an idea:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

and

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>
tom nobleman
  • 366
  • 3
  • 8
6

When you press enter in a form the natural behaviour of form is to being submited, to stop this behaviour which is not natural, you have to prevent it from submiting( default behaviour), with jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})
jsDevia
  • 1,282
  • 4
  • 14
  • 37
2

Two way to solve :

  1. form's action value is "javascript:void(0);".
  2. add keypress event listener for the form to prevent submitting.
bill
  • 63
  • 8
  • Listening to keypress event (e.g. enter key) can bring you in trouble with `textarea`s, and possibly selecting autocompletion or dropdowns, and mobile could be another source of trouble. – luckydonald Jun 10 '20 at 15:34
1

The first response is the best solution:

Add an onsubmit handler to the form (either via plain js or jquery $().submit(fn)), and return false unless your specific conditions are met.

More specific with jquery:

$('#your-form-id').submit(function(){return false;});

Unless you don't want the form to submit, ever - in which case, why not just leave out the 'action' attribute on the form element?

Writing Chrome extensions is an example of where you might have a form for user input, but you don't want it to submit. If you use action="javascript:void(0);", the code will probably work but you will end up with this problem where you get an error about running inline Javascript.

If you leave out the action completely, the form will reload which is also undesired in some cases when writing a Chrome extension. Or if you had a webpage with some sort of an embedded calculator, where the user would provide some input and click "Calculate" or something like that.

Community
  • 1
  • 1
skelliam
  • 522
  • 3
  • 11
0

Try preventDefault() method inside event listener for submit in this form

Nenad Markovic
  • 1