Leo Dominguez

Example

Clicking on Delete Comment in the comments will submit the hidden form.

Code

Great... so you say this is overcomplicating things? I suppose it depends on the scenario. In this case, we don't want to give each comment a form. We just want one hidden form but we still want to pass the comment id to be processed in the database. We might have used the technique to submit forms without buttons but we can't pass a value in a link or image. Using this technique allows us to pass a value and use the highly stylable <button> element.

Using this technique however, presents some confusing results in IE. The following code shows how to set the intended value of the button instead of the innertext.

The function should ideally be called using unobtrusive Javascript.

function doExampleForm()
{
	// initialize examplesubmit as what submits the form
	var gotexamplesubmit = document.getElementsByName("examplesubmit");

	// initialize exampleform as the form
	var gotexampleform = document.getElementById("exampleform");

	for (var i=0;i<gotexamplesubmit.length;i++)
	{
		gotexamplesubmit[i].onclick = function()
		{
			//fix for IE http://narayanraman.blogspot.com/2006/12/button-tag-problems-and-ie-6.html#c116822877477683649
			gotexampleform.deletecomment.value = this.attributes.getNamedItem("value").value;
			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="deletecomment" />
	</fieldset>
</form>

<div id="comment-1">
	<p>Comment 1</p>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer luctus tincidunt tortor. Vestibulum vel tortor non massa rutrum auctor. Cras ante. Morbi ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec magna. Donec libero. Duis nec odio. Quisque auctor nisi ac ante. Nullam justo augue, elementum et, pretium non, viverra non, libero. Praesent malesuada gravida leo. In hac habitasse platea dictumst. Nam cursus pede vitae felis. Donec consequat semper lorem. Nunc vel pede. Maecenas fringilla faucibus massa. Etiam nonummy. Cras rhoncus. Duis non libero sit amet massa mattis vulputate.</p>

	<p><cite>Posted by whoever at whenever</cite></p>

	<p><button type="button" name="examplesubmit" value="comment-1"><img src="/content/icons/comment_delete.gif" alt="" /> Delete Comment</button></p>
</div> <!-- end of comment -->

<div id="comment-2">
...
</div> <!-- end of comment -->

<div id="comment-3">
...
</div> <!-- end of comment -->

Credits

"submit is not a function" javascript error

Button tag problems and IE 6

Rediscovering the Button Element

Creating bulletproof graphic link buttons with CSS

http://nickcowie.com/2006/the-button-element-and-ie/

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-April/010908.html

Leo Dominguez