表单提交和 JavaScript 在 IE、Firefox 或 Safari 中不起作用；在 Chrome 中运行良好答案

【问题标题】：Form Submission & JavaScript not working in IE, Firefox, or Safari; works fine in Chrome表单提交和 JavaScript 在 IE、Firefox 或 Safari 中不起作用；在 Chrome 中运行良好
【发布时间】：2014-07-01 16:06:39
【问题描述】：

好的。我有一个表单，当提交时，它会通过 JavaScript 来决定将用户带到下一个页面。

当我在我的 IDE (Coda 2) 中预览它以及在 Chrome 中预览时，一切正常。但是，当我在 Firefox、IE（任何版本）或 Safari 中打开同一页面时，我无法通过第一页。

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link href="eh_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <nav id="navWrapper" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand">Site Title</a>
                </div>
                <div class="link-container">
                    <ul>
                        <li><a href="http://www.link.net">LinkText</a></li>
                        <li><a href="mailto:support@link.net?subject:Help”>Help</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="main-container">
            <div class="page-container">
                <form onsubmit="OpenWindow()" id="page1" action="" method="post">
                    <fieldset id="mainSelection">
                        <label><input type="radio" class="radio-button" value="A" name="sel1"> Option A</label><br />
                        <label><input type="radio" class="radio-button" value="B" name="sel1"> Option B</label><br />
                        <label><input type="radio" class="radio-button" value="C" name="sel1"> Option C</label><br />
                        <label><input type="radio" class="radio-button" value="D" name="sel1"> Option D</label><br />
                    </fieldset><br />
                    <input type="submit" value="Next" id="submitButton" form="page1">
                </form>
            </div><!--page-container-->
        </div><!--main-container-->
        <footer class="site-footer">
            Footer Text
        </footer>
        <script type="text/javascript" language="javascript">
            function OpenWindow() {
                var choice = document.getElementById("page1");
                choice = choice.sel1.value;

                if (choice == 'A') {
                    window.open('result1.html','_self');
                } else if (choice == 'B') {
                    window.open('page2.html','_self');
                } else if (choice == 'C') {
                    window.open('page3.html','_self');
                } else if (choice == 'D') {
                    window.open('page4.html','_self');
                }
                return: false;
            }
        </script>
    </body>
</html>

我不知道这里发生了什么。非常感激任何的帮助。

根据几个建议，我在脚本末尾添加了 return: false; 语句，但仍然无法正常工作。

【问题讨论】：

按 F12。转到脚本调试器。调试您的页面。（另外，你的 openWindow 函数应该返回 false）
我对您在页面中包含 jquery 但在代码中使用纯 JS 这一事实很感兴趣但我的猜测是正如 EricLaw 提到的那样，因为您的 openwindow 函数没有返回 false 表单正在将数据提交到同一页面。
@user1094553 这是我第二次弄乱 JS - 我不确定是否需要包含 jQuery 才能使其正常运行。
@EricLaw 我打开了 Firefox 调试窗口。在将return: false; 添加到我的脚本底部之前，当我提交表单时，它会打开该功能，但只是挂在加载消息上。添加return: false; 后，它会使用javascript:OpenWindow() 填充URL 字段并在显示屏上打印false...有什么想法吗？
@user1094553 查看最后一条评论。

标签： javascript html internet-explorer google-chrome firefox

【解决方案1】：

由于您使用的是 jQuery，因此只需使用它来获取值：

var choice = $('.radio-button:checked').val();

并删除

var choice = document.getElementById("page1");
choice = choice.sel1.value;

不知道为什么，但 IE 无法识别“choice.sel1.value”。此外，如果您想保持“返回 false”，则需要解决此问题，尽管我认为不需要：

return: false;

应该是

else
{
return false;
}

我还删除了 onsubmit="OpenWindow()" 并将操作更改为“javascript:OpenWindow()”，这对我有用。祝你好运！

【讨论】：

你已经做到了。这似乎在 IE11 中工作（有一个小故障，第一次无法工作，但在第二次尝试时它工作） - 我将在其他浏览器中测试以确认。
故障是我的错；我没有从表单声明中删除 onsubmit 选项。现在适用于所有浏览器。非常感谢！
太棒了！ jQuery 非常有用。很高兴它对你有用

【解决方案2】：

您的 onsubmit 处理程序需要返回 false，或接受 event 参数并取消提交事件。

<form onsubmit="return OpenWindow()" id="page1" action="#" method="post">

function OpenWindow() {
    // ...
    return false;
}

不要忘记# 作为表单上action 属性的值。

【讨论】：

【解决方案3】：

问题就在这里：

<form onsubmit="OpenWindow()" id="page1" action="" method="post">

从action="javascript:OpenWindow()"更改为action=""

许多浏览器不支持设置为 JavaScript 函数的表单操作。我很惊讶它得到 Chrome 的支持。

编辑

JS：

function OpenWindow() {
var choice = $('input[name="sel1"]:checked').val();
        if (choice == 'A') {
            window.open('http://youtube.com','_self');
        } else if (choice == 'B') {
            window.open('http://facebook.com','_self');
        } else if (choice == 'C') {
            window.open('http://twitter.com','_self');
        } else if (choice == 'D') {
            window.open('http://espn.com','_self');
        }
    return false;
}

【讨论】：

它似乎仍然无法正常工作，包括 Chrome...您可以看到其他任何可能导致此问题的原因吗？
在 IE 中对我来说很好...在此处评论您的 JSFiddle
action 属性接受 URL，javascript: 最终成为类似于 http 或 https 的协议标识符。 IE 似乎可以很好地解释这一点，但这确实不是 ECMA 规范的一部分，因此浏览器支持可能会变得参差不齐。相反，请使用action="#" onsubmit="..."。
将 return: false; 更改为 return false;
除此之外，我的一切看起来都很好。试试你提到的其他浏览器