Fix for dynamic html form using javascript not working in IE and Mozilla.
This articles explains how to fix a dynamic html form using javascript not working in IE and Mozilla.
In a non-AJAX setup, whenever a value needs to be submitted to the server indicating some action at the html-client side then an html form needs to be submitted which carries that value as an attribute or a parameter. Sometimes, its just a simple message/value which needs to be conveyed to the server and does not justify having a full html form on the web page. In such cases a form can be created dynamically( i.e. the form does not already pre-exist on the webpage), its action and method set and then the form is submitted. Sample code is as below -
The above code achieves the following -
1. Creates a javascript variable named 'form'
2. Sets the 'method' of the form as of type 'post'
3. Sets the 'action url' for the form where '<server-url>' can be replaced by your specific server url
4. A request param 'param1' with value 'value1' is passed to the server as request parameter
5. form is submitted using 'submit()' method.
The above code works fine in Chrome browser. However, it fails in IE(Internet Explorer) and Mozilla Firefox.
The reason for this failure is that IE and Firefox need an "actual" html form which existed in the html dom when the page was loaded. Only then can that html form be submitted. So, to make the above code work in IE and Firefox an empty placeholder form needs to be added to the html page and referenced for submit. Thus modified code is shown below -
The above code achieves the same as the previous code snippet but it works in all browsers. The basic differences are -
1. Instead of creating a 'fresh' form using 'createElement(form)' the existing form in the page DOM is retrieved using 'getElementById(<form id>)'
2. A dummy placeholder form is placed in the body section of the webpage which is empty. It is identified by its id which is 'form1' in the example.
In a non-AJAX setup, whenever a value needs to be submitted to the server indicating some action at the html-client side then an html form needs to be submitted which carries that value as an attribute or a parameter. Sometimes, its just a simple message/value which needs to be conveyed to the server and does not justify having a full html form on the web page. In such cases a form can be created dynamically( i.e. the form does not already pre-exist on the webpage), its action and method set and then the form is submitted. Sample code is as below -
Below code goes into the body section of the html document
var form = document.createElement("form");
form.setAttribute("method","post");
form.setAttribute("action", "<server-url>?param1=value1");
form.submit();The above code achieves the following -
1. Creates a javascript variable named 'form'
2. Sets the 'method' of the form as of type 'post'
3. Sets the 'action url' for the form where '<server-url>' can be replaced by your specific server url
4. A request param 'param1' with value 'value1' is passed to the server as request parameter
5. form is submitted using 'submit()' method.
The above code works fine in Chrome browser. However, it fails in IE(Internet Explorer) and Mozilla Firefox.
The reason for this failure is that IE and Firefox need an "actual" html form which existed in the html dom when the page was loaded. Only then can that html form be submitted. So, to make the above code work in IE and Firefox an empty placeholder form needs to be added to the html page and referenced for submit. Thus modified code is shown below -
Below code goes into the body section of the html document
var form = document.getElementById("form1");
form.setAttribute("method","post");
form.setAttribute("action", "<server-url>?param1=value1");
form.submit();(Below code goes in the body section of the html document)
<form id="form1"></form>The above code achieves the same as the previous code snippet but it works in all browsers. The basic differences are -
1. Instead of creating a 'fresh' form using 'createElement(form)' the existing form in the page DOM is retrieved using 'getElementById(<form id>)'
2. A dummy placeholder form is placed in the body section of the webpage which is empty. It is identified by its id which is 'form1' in the example.