一覧表から選択して入力フォームに反映

フォームでデータを入力する際、こんなお困りごとありませんか？

・商品一覧のExcelファイルから商品コードをコピペするのが面倒
・担当者の入れ替えがあり、その都度「担当者」の選択肢を修正しないといけない

今回は、一覧表とJavaScriptと組み合わせてデータの入力を簡単にするソースをご紹介いたします。
このソースによって、ボタンをクリックすると担当者の一覧が表示され、一覧から名前をクリックすると自動でフォームに反映すると言ったことが可能になります。

デモはこちら

変更・改定履歴

[ 2022.06.02 ] 改定
formタグにname属性を追加する工程を追加
[ 2024.02.02 ] 改定
単票のソースコードをそのままコピーペーストして動作するよう変更

ソースコード

フォーム

・検索ボタン

クリックしたら一覧表が表示されるボタンを設置します。

<input type="button" value="担当者検索" onClick="window.open('https://www.pi-pe.co.jp/area/table/63323/JBnkGf/M?S=lbripj2mhlasc', 'new', 'width=880,height=800,scrollbars=yes,resizable=yes,status=yes')">

・name属性の追加

formタグにname属性を追加します。
修正前のformタグ

<form method="post" action="/regist/Reg2">

修正後のformタグ

<form method="post" action="/regist/Reg2" name="form1">

一覧表

必要に応じて検索項目、表示項目を設定します。
一覧表にソースの追加は必要ありません。

単票

単票を表示した瞬間にフォームに値を返し、単票画面を閉じるJavaScriptを記載します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>情報を呼び出しています</title>

<script type="text/javascript">
<!--
function LCOPY(){
 
//情報差し込み
window.opener.document.form1.mail.value = '%val:usr:mail%';
window.opener.document.form1.name.value = '%val:usr:name%';
window.opener.document.form1.code.value = '%val:usr:code%';
 
window.close();
return;
　
}
 
-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" onLoad="LCOPY();">
	<p>担当者情報を呼び出しています。<br>
	5秒お待ちいただき、反映されない場合はページを閉じて再度お試しください。<br><br>
		<input type="button" value="閉じる" onclick="javascript:window.close()">
	</p>
</body>
</html>

以下の赤字の箇所は、フォームのformタグに追加したname属性と同じ文字列にしてください。

//情報差し込み
window.opener.document.form1.mail.value = '%val:usr:mail%';
window.opener.document.form1.name.value = '%val:usr:name%';
window.opener.document.form1.code.value = '%val:usr:code%';

注意点

フォームと一覧表のURLのドメインの違い。

通常、フォームのURLは「regXX.smp.ne.jp」、
一覧表やマイエリアなどのURLは「areaXX.smp.ne.jp」となります。

ドメインが違う場合、JavaScriptで「window.opener」を使用し、元のページに値を反映する動作がしません。
ただ、スパイラルのフォーム、一覧表は「regXX.smp.ne.jp」「areaXX.smp.ne.jp」とドメインが異なるため、そのままでは使用できません。

ですが、実はフォームや一般公開した一覧表ではドメインを変えても正しく動作します。

・デフォルトドメイン

https://reg18.smp.ne.jp/regist/is?SMPFORM=rgn-leljth-4f66f97fa27d86be7e847d6cbb4aabe2
https://area18.smp.ne.jp/area/table/33040/cJUnjf/M?S=phljp2lgnjma

・ドメイン変更したもの

https://area18.smp.ne.jp/regist/is?SMPFORM=rgn-leljth-4f66f97fa27d86be7e847d6cbb4aabe2
https://reg18.smp.ne.jp/area/table/33040/cJUnjf/M?S=phljp2lgnjma

一覧表とフォームのドメインを同じすることで、問題なくフォームに値を返すことが可能になります。

開発情報・ナレッジ

変更・改定履歴

ソースコード

フォーム

一覧表

単票

注意点

フォームと一覧表のURLのドメインの違い。

関連記事