GET送信された内容をURLのパラメータからjavaScriptで取得する方法

GET送信されてきたデータをURLの「?xxx=yyy」といったパラメータからjavaScriptで取得することができたら便利ですよね？
それができたら、フォームでGET送信されてきた内容を受け取って、ページ内容のフォームの値に代入したり、何らかしらのアクションをするといったこと以外にも、リンクにパラメータを持たせてその結果によってアクションを変えるといった仕掛けを作ることも可能になります。
以前phpでフォームの値を受け取る方法をご紹介しましたが、「フォーム送信された値を受け取るためだけにPHPを使うのはちょっと面倒」といった意見は正直あると思います。今回紹介する方法は、POST送信には対応できないものの、GET送信されたデータを受け取るだけなら、そのデータをURLのパラメータからjavaScriptで簡単に取得できてすごく便利ですので是非ご確認ください。

パラメータについて簡単な説明
URLのパラメータからGET送信されてきた値をjavaScriptで受け取るための関数
パラメータから受け取った値をselectに反映させるサンプル

パラメータについて簡単な説明

フォームからＧＥＴ送信されると「http://example.com/page.html?a=val&b=val2」というように通常のURL「http://example.com/page.html」の後ろに「?a=val&b=val2」といった値がくっついきます。この部分がパラメータと呼ばれる部分で、この例でいうと、「a」の部分がフォームの「name」部分「val」の部分が「value」部分ということになります。

送信元のフォームを簡単に表すと次の感じになります。

<form method="get" action="page.html">
<input type="hidden" name="a" value="val">
<input type="hidden" name="b" value="val2">
</form>

</form>

サンプルは「type=”hidden”」で示しましたが、もちろんhidden 以外のinputでもselectでもtextareaでも同じで、GET送信された場合データは「name=value」という形で値が送信されます。
この仕組みを利用して「http://example.com/page.html?a=val」のように「?a=val」といったパラメータ付きのリンクを作成して値を送信することも可能です。

URLのパラメータからGET送信されてきた値をjavaScriptで受け取るための関数

ここからが本題になります。
javaScriptでＵＲＬのパラメータを取得するには複雑な手順が必要になるので、これを関数(function)にしたものを用意しました。

function getUrlParam(param){
    var pageUrl = window.location.search.substring(1);
    var urlVar = pageUrl.split('&');
    for (var i = 0; i < urlVar.length; i++){
        var paramName = urlVar[i].split('=');
        if (paramName[0] == param) {
            return decodeURI(paramName[1]);        }
    }
}

function getUrlParam(param){

var pageUrl = window.location.search.substring(1);

var urlVar = pageUrl.split('&');

for (var i = 0; i < urlVar.length; i++){

var paramName = urlVar[i].split('=');

if (paramName[0] == param) {

return decodeURI(paramName[1]); }

}

上記をサイトに設置します。もちろん内部読込みでも、外部読込みでも大丈夫です。
これを設置しておけばあとは簡単です。「getUrlParam()」の「()」の中にパラメータの「=」の前部分、フォームでいうと「name」に当たる部分を入れるだけです。
たとえば、サンプル「http://example.com/page.html?a=val&b=val2」で「a」の値「val」を取得したいなら「getUrlParam(‘a’)」とします。

単純に、「a」の値「val」を文字とし出力するサンプルを作ってみます。

<script>
var para = getUrlParam('a');
document.write(para);
</script>

var para = getUrlParam('a');

document.write(para);

</script>

上記を実行すると「val」という文字が表示されます。
「getUrlParam(‘b’)」としたら「val2」という値を呼びだすことができます。

今回用意した関数(function)について少し解説しておきたいと思います。
関数(function)とは、簡単に言うといくつかの処理を一つにまとめた箱のものです。これに関し詳しくはこちらをご確認ください。phpの関数につて解説した内容の記事ですが、概念の部分は同じです。

1行目は「getUrlParam」という関数名で関数を作る設定をしている部分です。「（）」内の「param」という引数には取得したいvalue値のname名を代入することになります。（「?a=val&b=val2」で「val」を取得する場合は「a」の部分がこれに当たります。）

2行目では、location.searchで「？」以降のURLのパラメータ部分を取得して「pageUrl」という変数に代入しています。

3行目は、取得したパラメータの値を「split」を使って「&」部分で分割し「urlVar」という変数に配列として代入している部分です。仮にパラメータが「?a=val&b=val2」とするなら「[“a=val “, ” b=val2″]」という配列として変数「urlVar」に代入されます。

4行目で、パラメータから取得された値の数の分だけ繰り返す処理をする設定をしています。

5行目は、3行目でも使った「split」で「=」前後を分割して配列に処理しています。「a=val」なら「[“a”, “val”]」となり、それを「paramName」という変数に代入しているので「paramName[0]」が「a」、「paramName[1]」が「val」ということになります。

6行目では、「paramName[0]」と1行目で設定した引数「param」が同等であるかを判定しています。

7行目では6行目の結果が一致した場合その対の値であるparamName[1]を出力する作業をしています。paramName[1]をこのまま出力したいところなのですが、valueの値に日本語など、半角英数以外の文字列が含まれる場合、URLではそういった文字を直接使用できないためパーセントエンコーディングという文字コードに変換されており、このままでは正しく表示されません。　この問題に対応するため、「decodeURI()」を使ってパーセントエンコーディングの文字列が含まれる場合は元のエンコードに戻す設定をしています。

パラメータから受け取った値をselectに反映させるサンプル

私も業務の中でGET送信のパラメータから値を受け取ってなにかアクションを加えるということはよくあるのですが、一番よくあるケースがクリックさるリンクによって、selectの選択値が変わるようにして欲しいという要望です。たとえば、資料請求のリンクがクリックされたときは、「お問い合わせの種類」というselectで、「資料請求」部分が選択されている状態にしたいといったことです。
そんなわけで、そういった場合のサンプルをついでに紹介しておきたいと思います。

以下のサンプルは、「select」で「資料請求」というURLパラメータの値を受け取り結果に反映させることを想定したサンプルです。

<select name="contact">
	<option>選択してください</option>
	<option value="お問い合わせ">お問い合わせ</option>
	<option value="資料請求">資料請求</option>
	<option value="その他">その他</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//ＵＲＬのパラメータを取得するための関数
function getUrlParam(param){
    var pageUrl = window.location.search.substring(1);
    var urlVar = pageUrl.split('&');
    for (var i = 0; i < urlVar.length; i++) 
    {
        var paramName = urlVar[i].split('=');
        if (paramName[0] == param) 
        {
            return decodeURI(paramName[1]); 
        }
    }
}
//selectに取得した値を渡す
$(function() {
    var para = getUrlParam('contact');			
    if(!(para == null || para == '')){
       $( "select[name ='contct']").val(para);
    }
});
</script>

<option>選択してください</option>

<option value="お問い合わせ">お問い合わせ</option>

</select>

//ＵＲＬのパラメータを取得するための関数

function getUrlParam(param){

var pageUrl = window.location.search.substring(1);

var urlVar = pageUrl.split('&');

for (var i = 0; i < urlVar.length; i++)

{

var paramName = urlVar[i].split('=');

if (paramName[0] == param)

{

return decodeURI(paramName[1]);

}

//selectに取得した値を渡す

$(function() {

var para = getUrlParam('contact');

if(!(para == null || para == '')){

$( "select[name ='contct']").val(para);

}

});

</script>

上記でたとえばURLから「?contct=資料請求」という値が渡された場合、指定された「select[name =’contct’]」の値は「資料請求」になります。

jQueryの部分につて簡単に説明しておきます。
「if(!(para ==null || para ==”)){ }」の部分は、「contact」の値が空だった場合や、パラメータに「contact」が無かった場合にアクションを起こさないように設定しています。
「$( “select[name =’contct’]”).val(para);」では、JQueryの「.val()」をつかって、「select[name =’contct’]」にvalue値を渡しています。

これで、「資料請求」というボタンがクリックされたときは、フォームのセレクトで「資料請求」が選択されている状態にして欲しいと要望があった場合は、ボタンのリンク先を「http://example.com/form.html?contct=資料請求」としておくことで要望に応えることができます。

※このサンプルの場合はoptionのvalue値と選択肢の表示が同じですが、value値と表示が異なる場合は間違って表示名をいれてしまわないよう注意が必要です。たとえばselectのoptionが「<option value=”2″>資料請求</optipn>」である場合、selectで「資料請求」を選択させるためのURLは「http://example.com/form.html?contct=2」とする必要があります。

今回のサンプルではselectにvalue値を渡す方法を紹介しましたが、JQueryの.val()を利用すれば、selectに限らずinputやtextareaなどにも値を渡すことが可能です。