Question

好。我有一个表单，在提交时，会通过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;语句，但事情仍然无法正常工作。

Answer 1

问题就在这里：

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

从action=""

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

许多浏览器都不支持设置为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; }

Answer 2

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

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

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

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

Answer 3

由于您正在使用jQuery，只需使用它来获取值：

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

并删除

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

不确定原因，但IE并未认识到＆＃34; choice.sel1.value＆＃34;。而且，如果你想保持＆＃34;返回false＆＃34;，你需要解决这个问题，尽管我认为不需要：

return: false;

应该是

else
{
return false;
}

我还删除了onsubmit =＆＃34; OpenWindow（）＆＃34;并将操作更改为＆＃34; javascript：OpenWindow（）＆＃34;这对我有用。祝你好运！

表格提交＆amp; JavaScript无法在IE，Firefox或Safari中运行;在Chrome中运行良好

3 个答案: