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（）”添加到表单元素
更改所选元素的获取方式
引用您的条件（'A'，'B'等）

以下是codepen的链接：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更改表单操作，而不是告诉表单超出其规范并使用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。

EDIT（使用相同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

使用JavaScript有条不紊地在表单上打开页面

3 个答案: