【问题标题】:Form stay on same page after submit提交后表格停留在同一页面
【发布时间】:2014-10-04 02:27:32
【问题描述】:

我的页面即使在显示警报消息并且返回错误代码明显存在后仍继续提交。我在这里做错了什么?

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

【问题讨论】:

    标签: javascript forms submit


    【解决方案1】:

    你只能这样说

    onsubmit="return validateForm();"
    

    而不是

    onsubmit="validateForm();"
    

    updated demo

    那是因为您在for 循环中检查了selected 的值,所以第一次它的值是"",第二次它变成了No

    【讨论】:

    • 谢谢!有效!现在,看到代码,您能解释一下为什么即使选中了“否”选项,也会显示警报(“必须选择选项”)?
    • 谢谢!编写此代码然后才能正常工作的更好方法是什么?
    • 是的。我没有看到对代码的任何更改以使其正常工作?我错过了什么吗?
    • @turd.ferguson 如果您看到,我将在第一次if 检查之后关闭for 循环,但在您的代码中,所有if 条件都在@987654331 中进行检查@.
    • 哦!哈哈。我不知道为什么我没有看到。如您所知,我对 JavaScript 很陌生。非常感谢!
    【解决方案2】:

    在您的提交处理程序中,使用event.preventDefault,而不是return false

    function validateForm (event) {
    ...
            if(selected == "") {
                alert("Must select option.");
                event.preventDefault();
            }
    

    你必须做更多的事情来支持 IE8。

    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    

    或者,您可以将onsubmit 属性更改为return validateForm()。这将阻止默认操作并停止事件传播,而不仅仅是阻止默认操作。

    【讨论】:

    • 谢谢!我最终使用了 return validateForm() 。这是一个快速简单的修复!您知道为什么即使选中“否”选项它仍然显示警报(“必须选择选项”)吗?
    • 你的循环逻辑是这样的
    【解决方案3】:

    你错过了在表单的onsubmit()方法之前写return。

    onsubmit="return validateForm();"
    

    如果在 onSubmit() 方法调用之前不写 return 则 javascript 无法将页面返回到表单中。

    【讨论】:

      猜你喜欢
      • 2011-08-09
      • 2013-06-21
      • 1970-01-01
      • 1970-01-01
      • 2023-03-15
      • 1970-01-01
      • 2013-06-24
      • 2015-01-02
      • 1970-01-01
      相关资源
      最近更新 更多