My order form has the name, email and address fields for users to fill up. When they enter the info and submit the order, I've made the bottom part of the button image animated, so when they press it they know its "processing" the order, because many times without it they click the button twice.
But I've found out, if I leave the form fields blank and click the order button, it changes the button image position to the "please wait" state, but then it always stays in that state.
Is there a way to make the button revert back to its original position when the form isn't filled correctly?
This is the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylecss" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function submit_load() {
document.getElementById('submit').style.backgroundPosition = "0px -100px";
document.getElementById('submit').style.cursor = "default";
}
function submit_order() {
document.getElementById('submit').style.backgroundPosition = "0px 0px";
document.getElementById('submit').style.cursor = "pointer";
}
</script>
</head>
<body>
<div id="content2">
<form action="order.php" method="post" id="order" target="orderformx">
<p>Name: *</p>
<p>
<label>
<input name="name" type="text" class="oi" id="name" />
</label>
</p>
<p>Email: *</p>
<p>
<label>
<input name="email" type="text" class="oi" id="email" />
</label>
</p>
<p>Address: *</p>
<p>
<label>
<input name="address" type="text" class="oi" id="address" />
</label>
</p>
<p><input type="submit" value="" id="submit" onclick="submit_load()" name="submit" class="button" /></p>
</div>
</body>
</html>