0

私の注文フォームには、ユーザーが入力する名前、電子メール、住所のフィールドがあります。彼らが情報を入力して注文を送信すると、ボタン画像の下部をアニメーション化したので、ボタンを押すと、注文が「処理中」であることがわかります。

しかし、フォームフィールドを空白のままにして注文ボタンをクリックすると、ボタンの画像の位置が「お待ちください」状態に変わりますが、常にその状態のままです。

フォームが正しく入力されていないときにボタンを元の位置に戻す方法はありますか?

これはページです

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

1 に答える 1

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();
  }
}
于 2012-07-27T15:41:22.267 に答える