表单按钮功能提交 - 提交失败后恢复到初始状态答案

【问题标题】：Form button function submit - reverting back to initial state after failed submit表单按钮功能提交 - 提交失败后恢复到初始状态
【发布时间】：2012-07-27 15:23:20
【问题描述】：

我的订单有供用户填写的姓名、电子邮件和地址字段。当他们输入信息并提交订单时，我已将按钮图像的底部设置为动画，因此当他们按下它时，他们知道它正在“处理”订单，因为很多时候没有它他们会点击按钮两次。

但我发现，如果我将表单字段留空并单击订单按钮，它会将按钮图像位置更改为“请稍候”状态，但它始终保持在该状态。

当表单填写不正确时，有没有办法让按钮恢复到原来的位置？

这是页面

<!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>

【问题讨论】：

标签： forms function submit

【解决方案1】：

您实际上是将表单提交到表单标签中指定的 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();
  }
}

【讨论】：