チェックされた値を、URLパラメータに入れて送る

このあいだフォーム案件をやっていたのですが、ラジオボタンのチェックされている値を GETして最後に値をPOSTするっていうことをJSで実装しました。

質問？アンケートページ？みたいな感じです。

フォーム案件をする機会が少なかったのでGET？POST?ってなってしまって、悲しかったのでメモです。

GETとPOSTの違い？

そもそもGETとPOSTの違いがいまいち分かりませんでした、、、

GETだとURLに付加してリクエストするので目でパラメータを見ることができて POSTだと見えないっていうことなのかな？

GET

リクエストとして送信されるデータはURLに含まれる
(「URL?パラメータ名=値」という形式) 「?」パラメータのはじまり「&」パラメータの切れ目「=」挟んだ左側がGETの変数名、右側が渡される値
データを取得したい時に使用
データベースの書き換えが必要ない場合。

POST

リクエストとして送信されるデータはメッセージボディ部に含まれる
メッセージボディは、HTTPリクエストのパラメータ内容を渡す場所。
データを変更したい時に使用
データのソート、更新、削除、新規登録などで使用する場合。
パスワードのような秘匿情報をURLに表示したくない場合。
データ量が多い場合。
バイナリデータを送信したい場合。

URLなどを送信したい場合はGET、秘匿性の高いデータやデータベースなど重要度の高いデータ、大量のデータを送るときはPOSTを使うみたいです。

値をGETして最後にPOSTしたい

今回やりたかったことは次へボタンを押したときはラジオボタンにチェックされている値を次のページにGETして最後の送信ボタンでチェックされている値全てをPOSTするということです。

 var param = location.search;

    //次へ進むボタン
  $('.nextButton').on('click',function(){
        var value = $('[name=radio]:checked').val();
        var link = $(this).attr("href");

        if (value == null){
            //undefined(リンク無効)
            alert('選択肢１つ選んでから次設問にお進みください。');
            return false;
        }else{
            if(param){
                $(this).attr("href",link + param + '&' + value);
            }else{
                $(this).attr("href",link + '?' + value);
            }
        }
    });
 　 //回答完了ボタン
    $('.submitButton').on('click',function(){
        var value = $('[name=radio]:checked').val();

        if (value == null){
            //undefined(リンク無効)
            alert('選択肢１つ選んでから次設問にお進みください。');
            return false;
        }else{
            param = param.replace('?','');

            $(this).attr("value",param + '&' + value);
        }
    });

location.searchはクエリ部分を取得、変更するプロパティ

val()は全ての要素のvalue属性を返す。

まずラジオボタンがチェックされているかどうか判別します。
値が入ってないときは進まないように、値が入っているときはURLに値を付与していきます。
値を付与するのはattrでhrefを変更します。
１問目のときは'?' + 変数value(チェックされている値） ２問目以降は1問目以降の値に&で値をつなげていきたいので変数param（クエリ部分）+ '&' + 変数value(チェックされている値） になります。
送信ボタンをクリックしたときはPOSTしたかったので送信ボタンのvalueをattr("value",param + '&' + value)で変更して最後にPOSTします。

組み込みはシステム会社さんがするのでここまでなのですが、きちんと値がPOSTされるかどうか<?php print $_POST['name']; ?>で確認。ばっちりでした！

フォーム案件をする機会が少なかったでのこれを機にPHPでフォームを作って理解を深めたいなあと思ったり。（苦手意識があります。。。）

あ！URLを操作する実装ははじめてだったのできちんと覚えたいです。