Question

我正在使用此事件侦听器来提交按钮：

document.forms[formID].addEventListener('submit',validate);

我希望在没有刷新或重定向的情况下提交页面时保持原样，这是validate函数，而return false;不起作用

function validate() {

    CheckedN = this.name;
    CorrectAnswer = questions.correctAns[CheckedN];
    UserAnswer = -1;

    for (var i=0; i < 4; i++) {
        if (this.answerN[i].checked === true) {
            UserAnswer = i;
        }
    }

    if (UserAnswer === -1) {alert("Please choose an answer");}
    else {
        if (UserAnswer === CorrectAnswer) {alert("You are correct!");}
        else {alert("You are wrong!");}
        }

return false;
}

我做错了什么？感谢名单

Answer 1

编辑：您在别处的评论中说过您正在使用jQuery。这是令人惊讶的，因为你的代码没有使用它来连接事件处理程序。

如果你正在使用jQuery，这会变得更简单（正如我在下面的“偏离主题”位中提到的那样）。

将它连接起来：

$(document.forms[formID]).submit(validate);

并更改您的validate功能以接受event参数并在其上调用preventDefault：

function validate(event) {
    event.preventDefault();
    // ...rest of function here
}

jQuery平滑了下面列出的所有问题。

原始回答：

要改变的一些事情（但也请参见最后的非主题说明）：

您的addEventListener来电缺少参数，应为：

document.forms[formID].addEventListener('submit',validate,false);
//                                                        ^--- required

您的validate函数将收到event个对象（在符合标准的浏览器上）。它应该有一个preventDefault函数，当被调用时会停止浏览器的默认操作（提交表单）。所以声明参数并在它上面调用函数。
可悲的是，要支持IE，您必须使用attachEvent而不是addEventListener（他们才开始在IE9中支持）。
还遗憾的是，为了支持IE，你必须处理这样一个事实：他们将事件对象视为全局而不是传递它。
AND 可能没有preventDefault功能。叹息

所有人都说，连接：

var form = document.forms[formID];
if (form.addEventListener) {
    // Standards
    form.addEventListener('submit',validate,false);
}
else if (form.attachEvent) {
    // IE
    form.attachEvent('onsubmit', validate); // No third parameter, note the "on"
}
else {
    // REALLY old browser
    form.onsubmit = validate;
}

然后功能：

function validate(event) {
    var valid;

    event = event || window.event; // Handle IE difference

    CheckedN = this.name;
    CorrectAnswer = questions.correctAns[CheckedN];
    UserAnswer = -1;

    for (var i=0; i < 4; i++) {
        if (this.answerN[i].checked === true) {
            UserAnswer = i;
        }
    }

    if (UserAnswer === -1) {
        alert("Please choose an answer");
    }
    else {
        if (UserAnswer === CorrectAnswer) {
            alert("You are correct!");
        }
        else {
            alert("You are wrong!");
        }
    }

    // Both preventDefault and return false, to cover various browser
    if (event.preventDefault) {
        event.preventDefault();
    }
    return false;
}

偏离主题：正如您所看到的，您必须处理很多浏览器不一致问题。我推荐使用像jQuery，Prototype，YUI，Closure或any of several others这样的库来平滑这些不一致的问题，而不是自己动手（并且还提供了许多其他方便实用的东西）所以你可以专注于你实际上想要做的事情，而不会出汗小东西。

Answer 2

document.getElementById(formId).onsubmit = validate;

甚至更简单，在您的页面标记中，执行：

<form id="myFormId" onsubmit="return validate();">
    <!-- Form content here -->
</form>

Answer 3

这是我的头脑，但我认为提交表单的html控件应该是这样的：

<input type="submit" value="submit this form" onclick="return validate()"/>

Answer 4

这适用于使用普通JS的所有浏览器。让downvote fest开始

http://jsfiddle.net/mplungjan/zUFEw/

window.onload=function() {
  document.forms[0].onsubmit=validate; 
}

function validate() {
  var CheckedN = this.name;
  var CorrectAnswer = questions.correctAns[CheckedN];
  var UserAnswer = -1;
  for (var i=0, n=this.answerN.length; i < n; i++) {
    if (this.answerN[i].checked) {
      UserAnswer = i;
      break; // assuming only one answer
    }
  }

  if (UserAnswer === -1) {alert("Please choose an answer");}
  else {
    if (UserAnswer === CorrectAnswer) {alert("You are correct!");}
    else {alert("You are wrong!");}
  }
  return false; // will always stop submission unless there is an error above
}

PS：永远不要在表格中调用name =“submit”或id =“submit”

Answer 5

如果你可以使用jquery，你可以使用：

event.preventDefault()

像：

$("#formId").submit(function(event) {
...
  event.preventDefault();
...
});

http://api.jquery.com/event.preventDefault/

Answer 6

试试这个

document.forms[formID].addEventListener('submit', function(event)
{
     event.preventDefault();
     CheckedN = this.name;
    CorrectAnswer = questions.correctAns[CheckedN];
    UserAnswer = -1;

    for (var i=0; i < 4; i++) {
        if (this.answerN[i].checked === true) {
            UserAnswer = i;
        }
    }

    if (UserAnswer === -1) {alert("Please choose an answer");}
    else {
        if (UserAnswer === CorrectAnswer) {alert("You are correct!");}
        else {alert("You are wrong!");}
        }

return false;

}, false);

或者，您可以尝试将validate()更改为validate(event)并在其中调用event.preventDefault();，但我不是100％。

Javascript停止表单提交

6 个答案: