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

Firefox 15 和 IE 9 在提交表单之前都会更新 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>

请注意，调用表单的提交方法不会调度 sumbit 事件，因此不会再次调用提交处理程序。这与 DOM 2 HTML 标准背道而驰，但浏览器从未遵循它。

它已在新的“活动”HTML 规范中进行了更改，因此如果提交来自表单的提交方法，则不得发送提交事件。

于 2012-10-11T00:11:32.040 回答