Using an Image as a Submit Button in HTML
Posted by: twmeier
on Jul 31, 2009
There are times when you want to use an image as a button to submit a form. One case is when you need to use JavaScript to check the html form was submitted correctly. Here is the code:
<script>
function checkForm()
{
var msg = "Please correct the following: \n\n";
var error = false;
if(document.formName.elementName.value=="") {
msg += "You must enter a date.\n";
error = true;
}
if(error){
alert(msg);
}else{
if(confirm("Are you sure you want to submit this form?")){
document.formName.submit();
}
}
}
</script>
<form name="formName" action="/index.php?&task=something" method="post">
<input type="text" name="elementName" id="elementId" value="">
....
</form>
<a href="#" onclick="checkForm(); return false;"><img src="/images/brown_submit.jpg" /></a>
The method above works in all browsers, and is easy to use. When you click the image, the JavaScript function is called. If there are no errors in the form, the function submits the form. Its that easy.