javascript - 根据选择动态更新表单操作

Question

所以，这就是我想要做的。我想要一个 HTML 中的下拉菜单，其中包含一个提交按钮，该按钮会根据下拉菜单的值进行更改。

所以，当我有这个时：

<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>

我需要的是一个检查值是什么的按钮。如果值 = 20x30，则使用 URL www.example.com/20x30

如果值为 30x30，则使用 URL www.example.com/30x30

我远不是 PHP 专家，所以任何能够让我朝着正确方向前进的人都将是救命稻草 :)

Answer 1

一些简单的Javascript就足够了：

<form id="FORM_ID" action="DEFAULT_ACTION">
    <select name="sizes" id="select13">
        <option value="All">All</option>
        <option value="20x30">20x30</option>
        <option value="30x30">30x30</option>
    </select>
</form>

<script type="text/javascript">
document.getElementById('select13').onchange = function(){
    document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>

Answer 2

你可以试试这个：

Javascript：

function goto() {
    window.location = "http://www.example.com/"+document.getElementById('select13').value;
}

HTML：

<select name="sizes" id="select13">
    <option value="All">All</option>
    <option value="20x30">20x30</option>
    <option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>

当您单击“GO”按钮时，它会重定向到 example.com/（所选值）。

这是一个带有示例的JSFiddle。

---

编辑以适合您的评论：

function goto() {
    var selection = document.getElementById('select13').value;
    if (selection != 'All') {
        //window.location = "http://www.example.com/"+selection;
        alert("http://www.example.com/" + selection);
    } else {
        alert("Error: You must pick something");
    }
}

---

此外，如果您想提交表单然后进行重定向。PHP 代码如下：

<?php
    //Process your form without echoing anything before the header function.

    if($_REQUEST['sizes'] != 'All'){
        header('location:http://example.com/'.$_REQUEST['sizes']);
    }
    else{
        header('location:http://example.com/form.php');
    }

Answer 3

您onchange的下拉菜单需要一个事件：

document.getElementById("select13").onchange = function() {
    var currentVal = this.value;

    if (currentVal == "20x30") {
        //do stuff
    }
}