Form form forms by carriage return automatic submission of forms _javascript tips

Source: Internet
Author: User

There is only one input label in the 1.form form and pressing ENTER will automatically submit the form

Pressing the ENTER key automatically submits the form when there is only one <input type= "text" name= ' name '/> on the form form.

<form id= ' Form1 ' action= ' a1.jsp ' method= ' post ' >
<input type= ' text ' name= ' name '/>
</form>

If you don't want it to be autocommit, you can do this:

Add a <input type= "text"/> Press Enter will not be automatically submitted, but the page shows an unintelligible input box very awkward, and then found two solutions from the Internet:

(1) Add a <input type= ' text ' style= ' display:none '/> Do not display the input box, and then enter also do not submit:

<form id= ' Form1 ' action= ' a1.jsp ' method= ' post ' >
<input type= ' text ' name= ' name '/>
<input style = ' Display:none '/>
</form>

(2) Add a onkeydown event, and it will not be displayed after the carriage return:

<form id= ' Form1 ' action= ' a1.jsp ' method= ' post ' >
<input type= ' text ' name= ' name ' onkeydown= ' if ( EVENT.KEYCODE==13) return false; ' />
</form>

PS: I do not understand this event.keycode==13, just understand the conditions of judgment, but the specific still do not understand. If you understand, please do not hesitate to enlighten me.

If you want to add a carriage return event, you can add a judgment submission form to the onkeydown event:

<form id= ' Form1 ' action= ' a1.jsp ' method= ' post ' > <input style= ' display:none '/> <input
Text ' name= ' name ' onkeydown= ' if (event.keycode==13) {gosubmit ();} '/>
</form>

2. About whether automatic submission is required

Sometimes we want the return key to knock on the text box (input Element) to submit the form, but sometimes we don't want to. For example, search behavior, you want to enter the keyword immediately after the press return directly to submit the form, and some complex forms, you may want to avoid the return key error operation in the unfinished form filled out when it triggered the form submission.

To control these behaviors, no need to use JS, the browser has helped us do these processing, here summed up a few rules:

If there is a type= "submit" button in the form, the ENTER key takes effect.

If there is only one type= "text" Input in the form, the ENTER key takes effect, regardless of the type of the button.

If the button is not used with input, it is type,ie with a button, and the default is TYPE=BUTTON,FX defaults to Type=submit.

Other form elements such as textarea, select Do not affect, radio checkbox does not affect the trigger rule, but itself in the FX will respond to enter, under IE does not respond.

Type= "image" input, the effect is equivalent to type= "submit", do not know why the design of such a type, not recommended, you should use CSS to add a background map appropriate.

The above is a small set of form to introduce the form form by carriage return automatically submitted form, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.