PeaceJetのブログ

金融系の社内エンジニアをやりながら、マーケティングやデータ分析などもやっています。

【Javascript】クエリパラメータを取得してhiddenに入れる方法

JavaScriptで、URLのクエリパラメータを取得して、hiddenに値を格納したいというニーズがあったので紹介します。

たとえば、以下のようなURLがあり「hoge」と「huga」の値を取得したいと考えているとします。

http://www.example.com/index.htm?hoge=5454&huga=4545

自然に取ってくることが出来ないものなので、以下の関数を使用します。

var getUrlVars = function (){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

//戻り値は配列です。

準備が出来たので、まず、値を取得してみましょう!

//JavaScriptで取得する場合
var val_hoge = getUrlVars()['hoge'];
var val_huga = getUrlVars()['huga'];

//値を確認
console.log(val_hoge);
console.log(val_huga);

上記の操作で、値が取得できることが分かりましたので、これをhidden属性のinputにセットしてあげます。

<form name="form">
    <input type="hidden" name="elem1" value="" /> //hoge
    <input type="hidden" name="elem2" value="" /> //huga
</form>

上記のようなHTML文になっていた場合、以下のようにしてセットします。

document.form.elem1.value = val_hoge;
document.form.elem2.value = val_huga;

$("input[name='elem1']").val("hoge");
$("input[name='elem2']").val("huga");

これで、送信してあげればセットされた値が取れるはずです。
どの広告からの流入なのかとか、どのフォームが使用されたのかといった判定に使えるかもしれないですね。