JS Analog Click to submit a form for example compatible with the mainstream browser _javascript tips

Source: Internet
Author: User
In the actual application development, we will often use JS mode events, but sometimes encounter some problems, such as click events, for example, click the form outside the "submit" button to submit the form. Code on it.

Html:
Copy Code code as follows:

<button id= "BTN" > Submit </button>
<form action= "#" method= "get" id= "form" >
<input type= "text" name= "site" value= "www.woiweb.net" readonly/>
<input id= "subbtn" type= "Submit" value= "Do not click this button to submit" onclick= "alert (' I have already submitted ');" />
</form>

Javscript:
Copy Code code as follows:

<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
}
</script>

After testing, Ie,ff,chrome,opera,safari have no problem, all can submit the form normally.

But in the actual design, in order to make the submission button look better, buildder often use a tag to deal with, add a background image to simulate the button, we still use the above ideas to try, add a a label, let it submit the form, we only modify the HTML.

Html:
Copy Code code as follows:

<button id= "BTN" > Submit </button>
<form action= "#" method= "get" id= "form" >
<input type= "text" name= "site" value= "www.woiweb.net" readonly/>
<!--<input id= "subbtn" type= "Submit" value= "Do not click this button to submit" onclick= "alert (' I have already submitted ');" />-->
<a id= "Subbtn" href= javascript:; "onclick=" alert (' method for submitting a form here ') "> Mock submit button </a>
</form>

Javascript:
Copy Code code as follows:

<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
}
</script>

After the operation, the problem appeared, IE, FF, opera are OK, but the chrome and safari can not run normally, then the Internet search, found that a label is not the same as the button with the onclick () event, the solution is for IE and FF to write different logic, JS code is as follows:
Javascript:
Copy Code code as follows:

<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
if (/msie/i.test (navigator.useragent))//ie
{
Sub.fireevent ("onclick");
} else {
var e = document.createevent (' MouseEvent ');
E.initevent (' Click ', False, false);
Sub.dispatchevent (e);
}
}
</script>

At this point, the problem solved, although the problem is very simple, but it is easy to be ignored, posted out and share with you.

Grammar:

CreateEvent (EventType)

Parameter description

EventType the event module name of the events object you want to get. For a list of valid event types, see the "description" section.

return value

Returns the newly created Event object with the specified type.

Thrown

If the implementation supports the type of event that is required, the method throws the code as a Not_supported_err domexception exception.

Description

This method creates a new type of event that is specified by the parameter eventtype. Note that the value of this parameter is not the name of the event interface to be created, but rather the name of the DOM module that defines that interface.

The following table lists the legal values for EventType and the event interfaces created by each value:

Parameter event Interface Initialization method
Htmlevents htmlevent inievent ()
Mouseevents mouseevent inimouseevent ()
Uievents uievent iniuievent ()

After you create an Event object with this method, you must initialize the object with the initialization method shown in the previous table. For more information about initialization methods, see the Event object reference.

The method is not actually defined by the Document interface, but is defined by the Documentevent interface. If an implementation supports the Event module, the Document object implements the Documentevent interface and supports the method.

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.