Question: How can I add an HTML <form> element to the Text/HTML module in DNN?
Problem: When editors add a <form></form> tag to the Source of the Text/HTML module, the <form> tags are removed after they click the Update link on the “Edit Text/HTML” form.
Cause: ASP.NET only allows one form per page and by default creates its own form just inside the <body></body> tags.
Solution: Here’s an example form we will add to our Text/HTML module.
<form action="http://someURL.com" method="post"> <label for="firstName">Your First Name</label> <input id="firstName" title="Your First Name" alt="Your First Name" type="text" /> <label for="lasttName">Your Last Name</label> <input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" /> <input title="Submit Form" type="submit" value="Submit Form" /> </form> |
Take note of the Form method and action values.
Locate your submit button input. In our example it is
<input title="Submit Form" type="submit" value="Submit Form" /> |
Add the onclick method using the method and action values like this:
<input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit(); /> |
Next we remove the opening and closing <form></form>tags so we are left with the following code:
<label for="firstName">Your First Name</label> <input id="firstName" title="Your First Name" alt="Your First Name" type="text" /> <label for="lasttName">Your Last Name</label> <input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" /> <input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit();" type="submit" /> |
We cut and paste this code into the Text/HTML Editor making sure to be in “Source” mode. (Make sure the “Source” button in the upper left-hand corner of the Editor is highlighted.)
If you need your action to be get not post you can change this.form.method='get'. This will add the form values as URL parameters.
If you want your form to open a new window on submit you can add this.form.target='blank' as well.
Special thanks to Mitchel Sellers for his blog about this subject.
Update:
A word about this.form.method='get'
Some browsers (we’re not naming names but you know who you are), can’t handle the length of the __VIEWSTATE URL parameter which is sent when using the get method. In cases where we have to use the get method for forms, we add the following JavaScript code at the top of our form to clear the __VIEWSTATE value. This is not “best practices” but allows the solution above to work when using some “popular” browsers.
<script type="text/javascript"> //<![CDATA[ document.getElementById("__VIEWSTATE").value=''; //]]> </script> |
