我的订单有用户填写的名称,电子邮件和地址字段。当他们输入信息并提交订单时,我已经将按钮图像的底部部分设置为动画,因此当他们按下它时,他们知道它“处理”了订单,因为很多时候没有它,他们会点击按钮两次。
但我发现,如果我将表单字段留空并单击订单按钮,它会将按钮图像位置更改为“请稍候”状态,但它始终保持该状态。
当表单未正确填充时,有没有办法让按钮恢复到原来的位置?
这是页面
<!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>
答案 0 :(得分:0)
您实际上是将表单提交到表单标记中指定的target =“orderformx”,因此您的页面永远不会在点击提交时刷新,因为您的请求的响应将是针对您的目标。试试这个,
提交按钮的onclick属性中的将事件传递给函数调用。
<input type="submit" value="" id="submit" onclick="submit_load(event)" name="submit" class="button" />
在你的javascript中:
function submit_load(e) {
var event = e || window.event; // for IE
// add javascript validation here
if (valid) {
document.getElementById('submit').style.backgroundPosition = "0px -100px";
document.getElementById('submit').style.cursor = "default";
} else {
event.stopPropagation();
event.preventDefault();
}
}