Alexx The Rocks

雑記。

【フォーム】URLのパラメータで遷移先の項目を選択する【select/checkbox】

リンクをクリックした飛び先ページのフォームで、selectタグやcheckboxタグの中身を選択したい

例えば、特定の内容のランディングページを作って「お問い合わせはこちら」とした時、項目を選択した状態にしたい時はあるはず。つまり、通常の問い合わせフォームに複数の選択項目がある場合、例えば「商品に関する問い合わせ」「納期に関する問い合わせ」「その他の問い合わせ」等として、リンク元の内容が納期の説明だった場合、「納期に関する問い合わせ」を選択させておきたい。

example.com/form.htmlがリンク先のフォームなら、example.com/form.html?id=01等で、リンク先の項目は選択しておきたい。そんな時の備忘録。
※jQueryのバージョンが違うのは自分が試した場合なのでご了承ください。

checkboxの場合

選択したいタグがチェックボックスなら、下記を参考に可能だった。

https://teratail.com/questions/43186
URLパラメータに存在する値のチェックボックスを選択済みの状態にしたい|teratail

フォームの内容

<form action="./" method="get">
	<ul>
		<li><label><input type="checkbox" id="inquiry1" name="問い合わせ種別" value="問い合わせ内容1" required data-min="1" data-max="4" >問い合わせ内容1</label></li>
		<li><label><input type="checkbox" id="inquiry2" name="問い合わせ種別" value="問い合わせ内容2">問い合わせ内容2</label></li>
		<li><label><input type="checkbox" id="inquiry3" name="問い合わせ種別" value="問い合わせ内容3">問い合わせ内容3</label></li>
		<li><label><input type="checkbox" id="inquiry4" name="問い合わせ種別" value="問い合わせ内容4">問い合わせ内容4</label></li>
	</ul>
	<button type="submit">送信</button>
</form>

javascriptの内容

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
	var url = location.protocol + "//" + location.host + location.pathname + location.search;
	var params = url.split('?');
	var paramms = params.length>1&&params[1].split('&');
	var paramArray = [];
	for(var i = 0; i < paramms.length; i++) {
		var vl = paramms[i].split('=');
		paramArray.push(vl[0]);
		paramArray[vl[0]] = vl[1];
		var terms = decodeURIComponent(vl[1]);
		$('input').each(function(){
			var val = $(this).val();
			if(terms === val) {
				$(this).prop("checked",true);
			}
		});
	}
});
</script>

該当ページへのリンクを、例えば「example.com/form.html?inquiry[]=問い合わせ内容3」にすれば「問い合わせ内容3」にチェックが入った状態でページが開く。

selectの場合

選択しておきたいタグがselectの場合はこちらでOK。

https://teratail.com/questions/151576
URLのパラメーターで、リンク先のフォームのSelectを選択した状態にしたい|teratail

フォームの内容

<form action="./" method="get">
	<select name="お問い合わせ内容" id="inquiry" required="required">
		<option value="" selected="selected">選択して下さい</option>
		<option value="toiawase01">問い合わせ01</option>
		<option value="toiawase02">問い合わせ02</option>
		<option value="toiawase03">問い合わせ03</option>
		<option value="toiawase04">問い合わせ04</option>
	</select>
	<button type="submit">送信</button>
</form>

javascriptの内容

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
(function($) {
	var params = getParameter();
	$("#inquiry").val('modalshift');
	if(params['cc']!==""){
		$("#inquiry").val(params['cc']);
	}

	function getParameter(){
		var paramsArray = [];
		var url = location.href; 
		parameters = url.split("#");
		if( parameters.length > 1 ) {
			url = parameters[0];
		}
		parameters = url.split("?");
		if( parameters.length > 1 ) {
			var params = parameters[1].split("&");
			for ( i = 0; i < params.length; i++ ) {
			   var paramItem = params[i].split("=");
			   paramsArray[paramItem[0]] = paramItem[1];
			}
		}
		return paramsArray;
	};
})(jQuery);
</script>

該当ページへのリンクを、例えば「example.com/form.html?cc=toiawase02」にすれば「問い合わせ内容02」が選択された状態でページが開く。

selectのvalueが日本語の場合

選択しておきたいタグがselectの場合でvalueが日本語の場合はこちらでOK。

https://qiita.com/hdmt/items/211684c43c7b0ee6ffcd
jQueryでgetパラメータを受け取ってselectボックスを選択させる - Qiita

フォームの内容

<form action="./" method="get">
	<select name="お問い合わせ内容" id="inquiry" required="required">
		<option value="" selected="selected">選択して下さい</option>
		<option value="問い合わせ01">問い合わせ01</option>
		<option value="問い合わせ02">問い合わせ02</option>
		<option value="問い合わせ03">問い合わせ03</option>
		<option value="問い合わせ04">問い合わせ04</option>
	</select>
	<button type="submit">送信</button>
</form>

javascriptの内容

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	var arg  = new Object;
	url = location.search.substring(1).split('&');
	for(i=0; url[i]; i++) {
		var k = url[i].split('=');
		arg[k[0]] = k[1];
	}
	var id = arg.id;
	var list = {
		'01':'問い合わせ01',
		'02':'問い合わせ02',
		'03':'問い合わせ03',
		'04':'問い合わせ04'
	}
	var list_id = list[id];
	$("#inquiry").val(list_id);
	
});
</script>

該当ページへのリンクを、例えば「example.com/form.html?id=03」にすれば「問い合わせ内容03」が選択された状態でページが開く。