1. 【オリジナルフォーム】2つの質問の回答を1つのname属性にまとめる方法

【オリジナルフォーム】2つの質問の回答を1つのname属性にまとめる方法

2024.04.17 更新
Text=kintsuba
■目的
通常はname属性を2つに分ければ良いのですが、何らかの理由で2つの質問の回答を1つにまとめる必要があるときに使用します。
実装にはJavascriptの知識が必要となります。

■セット所要時間
10分

■セットの流れ
サンプルページをベースに説明しますので下記ファイルをダウンロードしてください。

サンプルページ> 
サンプルダウンロード>

※ソースコード確認方法 
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U 
mac:option + command + U


(1)
サンプルページではname属性のcol_1に2つの回答を持たせる処理を実装します。
name属性の記載ルールにつきましてはこちら>

①col_1(連番は任意)のタイトルと回答をtype="hidden"にする。回答の方には任意のid属性を振る(今回はid="col_1")
②1つ目の回答に任意のid属性を振る(今回はid="q1")
③1つ目の回答に任意のname属性を振る(今回はname="q1")
④2つ目の回答に任意のid属性を振る(今回はid="q2")
⑤2つ目の回答に任意のname属性を振る(今回はname="q2")
<section class="person-form">
	<dl>
		<input type="hidden" name="col_1_title" value="設問1、設問2">
		<input type="hidden" id="col_1" name="col_1" value="">
		<dt>設問1<span>*</span></dt>
		<dd><input id="q1" type="text" name="q1" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>

		<dt>設問2<span>*</span></dt>
		<dd><input id="q2" type="text" name="q2" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
	</dl>
</section>
(2)
設問が回答されたタイミングで2つの設問の回答をname属性のcol_1にまとめる
<script>
	$('#q1, #q2').on('change', function () {
		let q1 = $('#q1').val();
		let q2 = $('#q2').val();
		if (q1 !== '' && q2 !== '') {
			$('#col_1').val(q1 + ',' + q2);
		}
	});
</script>
ご希望通りのセッティングができましたか?

0人中0人がセッティングができたと言っています。

このマニュアルの作成者は kintsuba です。

こちらのマニュアルで希望のセッティングが出来なかった
際は、下記のどちらかでお問い合わせください。

フリープランの方はこちら
LINE公式アカウント機能拡張プラン、
オートコールセンタープランの方はこちら