【Javascript】「？」から始まるURLのクエリパラメータを設定・取得する方法

URLディレクトリの後ろに「?id=12345」のようなパラメータがあります。
このパラメータをサイト側で取得し、フォームのinputタグに渡し送信する方法を調べました。

URLパラメータとは?

URLの後ろについている?と変数と値です。

http://hogehoge.com?id=1234567

この?id=1234567を取得を目的とします。

なぜこのパラメータが必要なのか？

ではなぜこのパラメータをわざわざ付ける必要があるのでしょうか？
主に広告やマーケティングなどで計測の目的で使用されます。
広告側でパラメーターを付与し、サイト訪問時に取得し、申込み時にそのパラメータを渡せばどの経路で流入したかがわかるといったところでしょうか。

JavascriptでURLを取得する

Javascriptではlocation.hrefでURLを取得することができます。

<div class="text-area">このページのURLは「<span id="urlparam"></span>」です。</div>

var url = location.href;
document.getElementById("urlparam").innerHTML = url;

パラメーターのみを取得する

先程のやり方だとURLすべてを取得します。ほしいのは後ろのパラメータだけですので
location.searchでパラメータのみを取得します。

location.hrefをlocation.searchに変更するだけです。

var url = location.search;
document.getElementById("urlparam").innerHTML = url;

取得したパラメーターをinputタグに渡す

さてこちらの目的はフォームに埋め込み送信時に受け取ることです。
以下ではフォームのinputタグに埋め込む方法になります。

index.html

<form action="php/form.php" method="post" id="test" name="test">
  <div>
    <label>お名前</label>
    <input name="お名前" type="text">
  </div>

  <div>
    <label>メールアドレス [必須]</label>
    <input name="メールアドレス" type="text">
  </div>

  <div>
    <label>お問い合わせ [必須]</label>
  </div>

  <div>
    <input type="hidden" name="param" id="inputparam">
  </div>

  <button type="submit">送信</button>
</form>

form.js

var param = location.search;
document.getElementById("inputparam").value = param;

location.search;でパラメータのみを取得し
DOMのidのinputparamのvalueプロパティに変数paramを代入し、valueプロパティにパラメータを渡すことができます。

ユーザーには値は見えなくていいのでinputはhiddenにしておきます。
そうすると下記のような形でパラメータがinputのvalueに入ります。

<input type="hidden" name="param" id="inputparam" value="?id=1234">

追記

ページ遷移したときもパラメーターの引き継ぎがほしい
http://times-diary.hatenablog.com/entry/2018/03/14/230000