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
    }
}