フロントエンドエンジニアをやっています。
頑張るから読んでほしい。

チェックされた値を、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('選択肢1つ選んでから次設問にお進みください。');
            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('選択肢1つ選んでから次設問にお進みください。');
            return false;
        }else{
            param = param.replace('?','');

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

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

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

  1. まずラジオボタンがチェックされているかどうか判別します。
    値が入ってないときは進まないように、値が入っているときはURLに値を付与していきます。

  2. 値を付与するのはattrでhrefを変更します。
    1問目のときは'?' + 変数value(チェックされている値) 2問目以降は1問目以降の値に&で値をつなげていきたいので変数param(クエリ部分)+ '&' + 変数value(チェックされている値) になります。

  3. 送信ボタンをクリックしたときはPOSTしたかったので送信ボタンのvalueattr("value",param + '&' + value)で変更して 最後にPOSTします。

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




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


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



ブログはじめました。

はじめまして。こんにちは。なんとなくですが、ブログを作りました。

主にプログラミングについて書いていこうかなあ、と考えています。

自己紹介

1回目の記事は簡単に自己紹介をしようと思います。
7月生まれの25歳です。
すきなことは音楽と本とゲームと紅茶。きらいなことは早寝早起きです。

新卒(2015年)で入った会社は京都の地方銀行だったのですが、(預金担当でした。)
いろいろと思うことがあって2016年の夏から東京(三鷹)に引っ越して都内某Web制作会社でフロントエンドエンジニアとして働いています。

プログラミングを専門的に勉強していた訳ではないし、文系出身(専攻は会計学)だったのでここ1年間お仕事中はずっとあわあわしてたのですが、やっとプログラミングやwebに慣れてきた感じです。
ただ、とても物覚えが悪くて、人がすぐにできることに倍の時間をかけてしまうタイプなので日々勉強したことを記録していこうと思って始めたブログです。
たぶん間違った知識も書いてしまう気がするのでそのときは優しく教えてくれると嬉しいです。。。
あと、本を読むことが好きなくせに文書を書くことが苦手なので、ブログを通して克服したいななんて思ってもいます。

今後の更新内容ですが、HTML、CSS、JS、PHP、後は読んだ技術書や小説、最近聞いている音楽やはまったゲームなんかを書けたらなあと思っています。

では、よろしくおねがいします。