Question

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

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

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

这是页面

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

Answer 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();
  }
}

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

1 个答案: