0

私は非常に基本的な「お問い合わせ」フォームを作成しています。フォームの検証が成功すると、「フィードバックをありがとう」という小さなメッセージをページに (アラートとしてではなく) 表示したいと考えています。問題は、送信ボタンを押すと、お礼のメッセージが一瞬表示されてから消えてしまうことです。

コード：

window.onload = init;

function init() 
{
document.getElementById("contactForm").onsubmit=validate;
}

function validate()
{
//if statements to appear here returning false if any conditions are met
addMessage();
return true;
}

function addMessage()
{
var p = document.getElementById("content");
var l = document.createElement("p");
var m = document.createTextNode("Thanks for your message!");

l.appendChild(m);
p.appendChild(l);   
}

私は何を間違っていますか？私はjavascriptにかなり慣れていません。ありがとう！

4

2 に答える 2

1

trueを呼び出してから戻るaddMessage()ので、メッセージが表示され、フォームがすぐに送信されます。

すぐにフォームを送信したくない場合は、標準alert()(ユーザーが [OK] ボタンを押すのを待つ) を使用するか、false を返し、フォームform.submit()を読んだ後にユーザーがボタンをクリックしたときにメソッドを呼び出してフォームを明示的に送信することで、フォームの送信を防ぐことができます。メッセージ。

実は「メッセージありがとうございます！」みたいなメッセージ。フォームの属性で指定されたターゲット ページに表示されaction、フォームが既に送信された後に読み込まれます。フォームがまだ送信されていないときに、フォームが送信されたと仮定して何かを言うのは得策ではありません。

于 2012-10-10T23:38:37.113 に答える
0

Firefox15とIE9はどちらも、フォームを送信する前にDOMを更新するため、問題があるとは思えません。ただし、とにかく、 setTimeoutから呼び出すことで送信を遅らせることができます。そうすれば、DOMが更新されてメッセージが表示され、フォームが送信されることがほぼ保証されます。

<script>
function validate(form) {

  var formValid = false;

  /* validatation stuff, set formValid to appropriate value, assume passed */

  formValid = true;

  if (formValid) {

    // Show message
    document.getElementById('message').style.display = '';

    // Delay submit until after message displayed
    setTimeout(function(){form.submit()}, 10);

    // Stop form submitting immediately
    return false;

  } else {

    /* form isn't valid, do whatever and cancel submission */
    return false;
  }
}
</script>

<span id="message" style="display: none">Success!!</span>
<form onsubmit="return validate(this);">
  <input type="text" name="foo" value="bar">
  <input type="submit">
</form>

フォームのsubmitメソッドを呼び出しても、sumbitイベントはディスパッチされないため、submitハンドラーは再度呼び出されないことに注意してください。これはDOM2HTML標準に反していますが、ブラウザはとにかくそれに従わなかった。

新しい「生きている」HTML仕様で変更されたため、フォームの送信メソッドから送信する場合は、送信イベントをディスパッチしてはなりません。

于 2012-10-11T00:11:32.040 に答える