Example
Clicking on any SUBMIT word on this page will submit the hidden form.
Lorem ipsum dolor SUBMIT sit amet, consectetuer adipiscing elit. Quisque feugiat, arcu sit amet laoreet imperdiet, eros tortor adipiscing ipsum, eu convallis turpis lectus vitae magna. Morbi tincidunt adipiscing nisi. Aenean pellentesque, leo sed SUBMIT fermentum hendrerit, felis risus fringilla elit, mattis porta sem ante vel metus. Suspendisse velit. Integer pede. Sed aliquam, sapien at consequat pretium, sem erat euismod tortor, eget congue lorem nisi SUBMIT ut libero. Vestibulum dapibus SUBMIT posuere diam. Integer id mauris at lacus dapibus scelerisque. Integer quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc justo sem, consequat SUBMIT ac, condimentum ut, feugiat vitae, ante. Nulla erat.
Code
Why would anyone want to do this? Well if you're here you probably just want to know how, not debate whether it's right or wrong. I can tell you it's a million times better than having any inline Javascript do the same thing.
Some possible scenarios where this may be useful would be adding functionality to existing content. Allowing users to click on images or text to add their vote or something similar can take advantage of this method, and behind the scenes you can write the hidden form information to a database. Tools like this can be useful for company Intranets where browser settings are pre-configured and all the same. If using something like this for external sites, you could fall back on making the hidden form visible when Javascript is not available.
You can change this code to look for any element with a unique id if only one thing on the page will be able to submit the form. Or you can setup a container and say, all the images in this container will submit the form, etc.
The function should ideally be called using unobtrusive Javascript.
function doExampleForm()
{
// initialize gotexamplesubmit as what submits the form
var gotexamplesubmit = document.getElementsByName("examplesubmit");
// initialize gotexampleform as the form
var gotexampleform = document.getElementById("exampleform");
for (var i=0;i<gotexamplesubmit.length;i++)
{
gotexamplesubmit[i].onclick = function()
{
gotexampleform.submit();
}
}
}
window.onload = function()
{
// place any other onload functions here
doExampleForm();
};
Calling the Javascript function unobtrusively allows for graceful degradation. Notice no inline Javascript in sight!
<form id="exampleform" method="post" action="">
<fieldset>
<input type="hidden" name="examplevalue" value="examplevalue" />
</fieldset>
</form>
<p>Lorem ipsum dolor <a name="examplesubmit">SUBMIT</a> sit amet, consectetuer adipiscing elit. Quisque feugiat, arcu sit amet laoreet imperdiet, eros tortor adipiscing ipsum, eu convallis turpis lectus vitae magna. Morbi tincidunt adipiscing nisi. Aenean pellentesque, leo sed <a name="examplesubmit">SUBMIT</a> fermentum hendrerit, felis risus fringilla elit, mattis porta sem ante vel metus. Suspendisse velit. Integer pede. Sed aliquam, sapien at consequat pretium, sem erat euismod tortor, eget congue lorem nisi <a name="examplesubmit">SUBMIT</a> ut libero. Vestibulum dapibus <a name="examplesubmit">SUBMIT</a> posuere diam. Integer id mauris at lacus dapibus scelerisque. Integer quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc justo sem, consequat <a name="examplesubmit">SUBMIT</a> ac, condimentum ut, feugiat vitae, ante. Nulla erat.</p>
