Js simulation click submit form as an example compatible with major browsers

In the actual application development, we will often use JS module events, but sometimes we will encounter some problems, such as clicking events, for example, click the "submit" button outside the form to submit the form. Let's do the code.

Html:

 
<h3> Click submit, and the click event to test the submit button is also triggered. </h3> 
<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=" Don't click this button to submit yet " onclick="alert(' I have submitted it ');"/> 
</form> 

Javscript:

 
<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 and Safari have no problems, and the form can be submitted normally.

But in the actual design, in order to make the submit button look better, buildder often USES the a tag to handle them, and adds a background picture to simulate the button. We still try to use the above idea, add an a tag, let it submit the form, we only modify the HTML.

Html:

 
<h3> Click submit, and the click event to test the submit button is also triggered. </h3> 
<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=" Don't click this button to submit yet " onclick="alert(' I have submitted it ');"/> --> 
<a id="subbtn" href="javascript:;" onclick="alert(' This is where the method to submit the form is called ')"> Mock submit button </a> 
</form> 

Javascript:
The same code at the page code block index 1
After running, the problem appeared, IE, FF and Opera were all OK, but Chrome and Safari could not work properly. Later, I searched the Internet and found that the a label was not the same as the button with onclick() event. The solution was to write different logic for IE and FF, and the JS code was as follows:
Javascript:

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

So far, the problem is solved, although this problem is very simple, but it is easy to be ignored by everyone, post and share with you.

Grammar:

CreateEvent (eventType)

Parameters to describe

The Event module name of the Event object that eventType wants to get. For a list of valid event types, see the notes section.

The return value

Returns the newly created Event object with the specified type.

throw

This method throws a DOMException exception with code NOT_SUPPORTED_ERR if the implementation supports the required event type.

instructions

This method creates a new eventType, which 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 the name of the DOM module that defines that interface.

The following table lists the legal values of the eventType and the event interfaces created for each value:

Parameter event interface initializes the method
HTMLEventsHTMLEventiniEvent ()
MouseEventsMouseEvent iniMouseEvent ()
UIEventsUIEventiniUIEvent ()

After the Event object is created with this method, the object must be initialized with the initialization method shown in the table above. For more information about the initialization method, see the Event object reference.

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