Handling of carriage return forms submitted by different browsers

Source: Internet
Author: User

The condition is:
In IE and Firefox
1. The "action" Field of the <form> attribute is required;
2. There is an "input" of type = "submit ".
In Chrome and Safari
The first entry is enough. (Note 1)
Therefore, if you want to control the submission behavior (for example, check whether required items are filled before submission ), you can add the Javascript "onXXX (such as onClick)" event after "input" of type = "submit. If Asynchronous interaction is required to detect related fields, the result is invalid. Because return false is a subfunction of onreadystate =, it cannot control the global. In this case, the onsubmit attribute of <form> is used (note 2 ). For example:
HTML
Copy codeThe Code is as follows:
<Form name = "form1" id = "form1" action = "act. php" method = "post" onsubmit = "myfn (); return false;">

Myfn () is a self-defined function: No matter how you use it (such as hitting "enter" or clicking the "input" button of type = "submit" (instead of type = "button) this function is triggered when the API is submitted. Therefore, you do not have to add the Javascript event "onXXX" after "input" of type = "submit. It is controlled directly in onsubmit, which is more intuitive and unified, unless you intentionally control the submission method (onClick or something ).
Return false is at the end, indicating that this form is not submitted. Document. form1.submit () can be used as a branch of the selection condition of myfn.

Summary:
In this way, the <form> has the "action" and "onsubmit" attributes, and the "input" button of type = "submit" can be used in any browser (no? Please give me feedback) to use the "Enter" button and the mouse to check and submit the relevant fields of the form asynchronously (Ajax) and synchronously (Javascript only.
Others:
1. What if I use type = "button" to asynchronously detect related fields?
In this way, the "input" must have an event trigger. In IE and FF, you cannot directly press "Enter" in the text box to submit the form. If necessary, you need to use additional functions to monitor what the user presses and give a response (note 3 ). Worse, in Ch and Sa, the type = "submit" button is ignored and the form is submitted directly based on the "action" attribute, it is impossible to achieve the expected detection, and there may be more troublesome consequences.
2. What if the "action" attribute is not written and the form is submitted asynchronously?
In this way, the form is submitted asynchronously, not just for detection. This attribute is unnecessary. It is redundant. If this can provide a better user experience, why not? Haha.
[Note]
1 is valid in IE8, FF, and Ch tests. Opera and Sa are not tested.
Copy codeThe Code is as follows:
When chrome presses the Enter key in the form, the submission form is triggered.
After a login port is opened in IE or firefox, press enter and then use js to perform ajax verification. Several input boxes are written in a form. When a user enters the user password, ajax is triggered to judge, at this time, neither IE nor firefox will submit the form, and the form does not have submit. both chorm and safari will submit all input forms at this time.

In the future, do not write ajax in form.

2. This Article
Copy codeThe Code is as follows:
In chrome, do not press enter to submit a form
I posted a post on the Forum and asked:

"On chrome
I can change the press key or make it invalid ."

At that time, the problem was solved to avoid the problem caused by the carriage return submission form. The problem is actually very simple.

Start the script on the Form submission event:

Onsubmit = "MySubmit (); return false ;"

MySubmit () can be used to determine the submission time. For example, you can use another hidden form to complete custom submission tasks.

This problem is a bit difficult, but it is difficult to change the carriage return event on chrome. If you have any concerns, please let us know.

3. Refer to previous articles.
Obtain the KeyCode in both IE and FF.
I used to test my website in IE8. Some of the Code that was written later failed and I had to download Firefox and its plug-in Firebug to find that FF does not support windows. event. So I changed my mind.
HTML
<Input type = "password" name = "psw" id = "loginpsw" onkeypress = "submit1 (event)"/>
Javascript
Copy codeThe Code is as follows:
Function submit1 (e ){
Var isie = (document. all )? True: false; // determines whether the kernel is IE or Mozilla.
Var key;
If (isie)
Key = window. event. keyCode; // IE uses the windows. event
Else
{
Key = e. which; // the three key functions have a default Hidden variable, which is passed by e. E. which provides an index value to the Mo kernel (Note 1)
}
If (key = 13)
Send1 ('loginemail', 'loginpsw'); // triggered event, customizable
}

Related Article

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.