用JavaScript有条件地打开表单提交页面

Question

我试图在表单提交上设置一个条件页面加载，遵循“如果用户选择x选项，将它们发送到x页”逻辑。我真的不太熟悉JavaScript，但这似乎是最简单的方法。

这是我的HTML：

<form id="page1" action="javascript:OpenWindow()" method="post">
    <fieldset id="mainSelection">
            <label><input type="radio" class="radio-button" value="A" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="B" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="C" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="D" name="sel1"> text</label><br />
    </fieldset>
    <button type="submit" value="Next" id="submitButton">Next</button>
</form>

这是我的剧本：

<script type="text/javascript" language="javascript">
        function OpenWindow() {
        var choice = document.getElementByClassName("radio-button").value
            if (choice == A) {
                window.open('http://www.website.net');
            }
            else if (choice == B) {
                window.open('http://www.website.net');
            }
            else if (choice == C) {
                window.open('http://www.website.net');
            }
            else {
                window.open('http://www.website.net');
            }
        }
</script>

我在这里做错什么了？

Answer 1

我做了一些改变。

• 将onsubmit="OpenWindow()“添加到form元素
• 更改获取所选元素的方式
• 关于你的条件('A'，'B‘等)

下面是到代码库的链接：http://codepen.io/anon/pen/qajxh

看起来是这样的：

<form onsubmit="OpenWindow()" id="page1" action="javascript:OpenWindow()" method="post">
    <fieldset id="mainSelection">
            <label><input type="radio" class="radio-button" value="A" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="B" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="C" name="sel1"> text</label><br />
            <label><input type="radio" class="radio-button" value="D" name="sel1"> text</label><br />
    </fieldset>
    <button type="submit" value="Next" id="submitButton">Next</button>
</form>

像这样的js：

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

    if (choice == 'A') {
        window.open('http://www.website.net');
    }
    else if (choice == 'B') {
        window.open('http://www.website.net');
    }
    else if (choice == 'C') {
        window.open('http://www.website.net');
    }
    else {
        window.open('http://www.website.net');
    }
} 

Answer 2

如果您的表单在没有javascript的情况下正常工作，那么为什么不尝试用Javascript更改forms操作，而不是告诉表单超出常规使用javascript打开窗口。

<form id="page1" action="http://www.website.net" method="post">
<fieldset id="mainSelection">
    <input type='radio' value='http://www.website.net' name='sel1' onclick='javascript: document.getElementById("page1").action = this.value;' />
    ...
</fieldset>
<input type='submit' name='submit' value='Submit' />
</form>

如果您曾经将单选按钮设置为默认值，则可以将默认操作设置为该按钮URL的窗体。

编辑(使用相同HTML的替代方法)

若要获取您所拥有的内容，请将您的javascript更改为：

<script type="text/javascript" language="javascript">
function OpenWindow() {
    // grab the elements by name (array)
    var choice = document.getElementsByName("radio-button");
    // loop through the array
    for (var i = 0; i < choice.length; i++ ) {
        // grab only the checked one
        if (choice[i].checked) {
            if (choice[i].value == A) {
                window.open('http://www.website.net');
            }
            else if (choice[i].value == B) {
                window.open('http://www.website.net');
            }
            else if (choice[i].value == C) {
                window.open('http://www.website.net');
            } else {
                window.open('http://www.website.net');
            }
        }
    }
}
</script>

Answer 3

我觉得这不像你想的那样。我也不能测试这一点，但我很确定调用getElementByClassName("radio-button")将返回所有4个标签，因为它们都有类radio-button