kojiokanoのブログ

コーディング業務で困ったところをまとめています。

urlのパラメータを取得し、value(フォームテキスト)に設定する方法

URLのパラメータを取得してLPのテキストフォームへ吐き出す。

※db_001で使用。db_001の場合はフォームをdisplay:noneで見えないようにしてる。

———————————————————————————————————————

 js部分

 


window.onload = function onLoad() {
param = GetQueryString();
target = document.getElementById("param").defaultValue=param["jigyousho_and_service_id"];
target.innerHTML = param["jigyousho_and_service_id"];
}
function GetQueryString() {
if (1 < document.location.search.length) {
// 最初の1文字 (?記号) を除いた文字列を取得する
var query = document.location.search.substring(1);

// クエリの区切り記号 (&) で文字列を配列に分割する
var parameters = query.split('&');

var result = new Object();
for (var i = 0; i < parameters.length; i++) {
// パラメータ名とパラメータ値に分割する
var element = parameters[i].split('=');

var paramName = decodeURIComponent(element[0]);
var paramValue = decodeURIComponent(element[1]);

// パラメータ名をキーとして連想配列に追加する
result[paramName] = decodeURIComponent(paramValue);
}
return result;
}
return null;
}

 ※赤文字部分を任意のパラメータid名に変更して使用する。 

 ※jsは外部ファイル化して任意の場所に保存しておく。

———————————————————————————————————————

 haml 1.head内で上のjsを読み込む

 

 = javascript_include_tag "jquery.example-param.js", 'data-turbolinks-track' => true

 

 haml 2.bodyにパラメータ値を設定したいフォームを書く

 

  .box--hidden.border-box
= f.answer_for :parameter do |a|
= a.text_field :body, class: 'form_item', id:'param', type:'text', value:'', :"data-prompt-position" => 'topLeft:0,10', data: { :"errormessage-value-missing" => 'お名前を入力してください。' }

 ※赤文字部分重要