【フォーム】URLのパラメータで遷移先の項目を選択する【select/checkbox】
Contents
リンクをクリックした飛び先ページのフォームで、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&¶ms[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」が選択された状態でページが開く。
- 次の記事:
- 【javascript】要素を絞り込み表示したい【css】 »