javascript - form with no action and where enter does not reload page - Stack Overflow

admin管理员组

文章数量:1134580

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).

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).

• javascript
• html
• forms

Share Improve this question Follow edited Jul 21, 2015 at 21:32 nikodaemus 2,12833 gold badges2424 silver badges3333 bronze badges asked Nov 30, 2009 at 7:04 Matt RobertsMatt Roberts 1,38922 gold badges88 silver badges88 bronze badges 3

• Do you want it never to submit? – UpTheCreek Commented Nov 30, 2009 at 7:06
• If you have just a <form> with a single <input> that is a text field it shouldn't submit when you hit enter, should it? – Zack The Human Commented Nov 30, 2009 at 7: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 Commented Dec 1, 2009 at 2:34

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 269

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

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?

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>

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>

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

Two way to solve :

1. form's action value is "javascript:void(0);".
2. add keypress event listener for the form to prevent submitting.

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.

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

本文标签： javascriptform with no action and where enter does not reload pageStack Overflow