ChatGPT解决这个技术问题 Extra ChatGPT

form with no action and where enter does not reload page

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

Do you want it never to submit?
If you have just a
with a single that is a text field it shouldn't submit when you hit enter, should it?
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.

D
Dutchie432

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


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.
thanks for this additional answer. this still works - but is this still the "state of the art" solution in 2016?
@low_rents I still use it all the time and haven't personally found a better solution.
Thank you for the precise and a great solution to resolve the reloading of page while hitting enter key :) Best solution.
K
K Prime

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?


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.
Dutchies answer works perfectly. Firefox was just refreshing the page.
@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...
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.
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).
G
GenericMeatUnit

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>

Thankyou for that. I am afraid the clarity of your answer made clear to me the correctness of an earlier answer so you don't get the accepted answer but you do get my gratitude and an upvote!
Thank you. Glad to help. I was never one for the limelight anyway. ;)
t
tom nobleman

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>

j
jsDevia

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

b
bill

Two way to solve :

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


Listening to keypress event (e.g. enter key) can bring you in trouble with textareas, and possibly selecting autocompletion or dropdowns, and mobile could be another source of trouble.
C
Community

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.


N
Nenad Markovic

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