一つのページでGETとPOSTどちらか選択して送信できるフォームを作成したいです。

Question

現在送信フォームを作成しています。
formactionで送信方法をGETかPOSTであらかじめ設定して送信することはできます。
これをユーザー側から送信方法をどちらで送信するか選択できる方法を探しているのですがご存知の方いらっしゃいませんか？
formactionを2つ作成してそれぞれmethodを別々に指定しましたがどちらもGETで送られてしますので…

何卒宜しく御願いします。

Answer 1

素朴に思ったことなのですが、ユーザーから見て「GET/POSTを選ばせる」というのは、多くの場合に混乱しか生まない気がします。

大半のユーザーにとってはGETで送られるかPOSTで送られるかなどどうでもいいわけですし、そもそもそれぞれが何を意味するかも知らない、ということも多いでしょう。

REST設計になっていて同じエントリポイントげのGET/POSTで挙動が変わる、ということはあるのかもしれませんが、それで同じフォームを使うこともないとは思います。

GETやPOSTそのものの技術的な見本にするなら別ですが、そうでない場面で同じ機能の送信手段をユーザーに選ばせる必要はあまりないでしょう。

Comments

[takato]

maisumakun様
おっしゃる通りです。
テストでGETとPOSTでリクエストをかけた場合は同じレスポンスが返却されるか確認したく質問しました。
似たようなHTMLを作成してそれぞれGET版とPOST版で作成するのが手っ取り早いかと思いますが。。。
ご親切にどうもありがとうございます！

Answer 2

javascriptは分かりますでしょうか?
分かるのなら、以下のようにしてみてはいかがでしょうか。

HTML

<select id="method_select">
    <option value="GET" selected>GET</option>
    <option value="POST">POST</option>
</select>

<form action="hoge.html" id="form">
    <input type="submit" id="form_submit" value="送信">
</form>

javascript

document.getElementById("form_submit").onclick = function(e){
    e.preventDefault();
    var method = document.getElementById("method_select").value;
    var form = document.getElementById("form");
    form.method = method;
    form.submit();
}

上記は未検証ですので、お気を付けください。

Comments

[takato]

shunsukeIzui様

初めまして使用したことあります！早速参考にしましたが「Cannot set property 'onclick' of null」というエラーが出てしまいました。
ただセレクトボックスで選択できるのは使いやすくていいですね！

[orange0190]

form等の要素にidはきちんと付けてますか?

[takato]

着けています。

試しに提示していただいたコードをそのまま見てみようと確認したら同じ箇所にエラーが表示されました！「= function(e){」から赤線が入っています。

[orange0190]

すみませんが、htmlのソースを提示していただけますか?

[takato]

ShunsukeIzui様
申し訳ありません。ShunsukeIzui様のおかげで無事解決致しました！解決済みのコードですが記載致します。

Answer 3

下記の方法で解決いたしました。

<select id="method_select">
<option value="GET" selected>GET</option>
<option value="POST">POST</option>
</select>
<button type="submit" value="送信">
</button>

$(function() {
		$('#FORM').cleanQuery();
	});

    $(function() {
        $('#FORM').on('submit', function(e) {
            e.preventDefault();
            var $form = $(this).clone();
            $form.prop('method', $('#method_select').val());
            $(this).find(':input').each(function() {
                var $element = $(this);
                if ($element.val() == '') {
                    $form.find('*[name="' + $element.prop('name') + '"]').remove();
                }
            });
            $form.submit();
        });
    });

Answer 4

formタグが読み込まれる前にイベントを設定しようとしているのだと思います。

ShunsukeIzuiさんのJavaScriptのコードを
window.onload関数内で実行してみてください。

window.onload = function(){
	document.getElementById("form_submit").onclick = function(e){
	    e.preventDefault();
	    var method = document.getElementById("method_select").value;
	    var form = document.getElementById("form");
	    form.method = method;
	    form.submit();
	}
}