最新ワードプレス ホームページ制作
スタッフブログ

メールフォームの「ラジオボタンによる条件分岐」をページ内で複数実行したい時のHTMLとJavascriptの記述例

by STAFF

先日、ビジネスパートナーから、「CRMメールのフォーム作成ツールで、条件分岐（ドリルダウン）を複数設置する場合は、”オリジナルHTML”を自作し、Javascriptの記述を含めたHTMLソースをアップロードする必要があるらしい。JavascriptもHTMLも苦手だから、助けてよろしく」と連絡がありました。

私は過去に何度もJavascriptの条件分岐をメールフォームに実装したことがあるので、「任せてよろしく」と返答し、作業のためにフォーム作成ツールにログインしました。

確かに標準の機能では「条件分岐（ドリルダウン）を複数設置することができない」ようでした。
そしてオリジナルHTMLを利用するユーザーのために用意されていた「HTMLのサンプル」にも該当するものはありませんでした。
カスタマーサポートに電話をかけ、オリジナルHTMLでしか実現できないことを確認しました。

私は早速、すでに標準機能を用いて途中まで作られていたメールフォームのHTMLファイルをダウンロードし、そこに条件分岐の記述を加えたものをアップロードしてみたのですが、『value属性の値が不正です』というエラーメッセージが表示されてしまいました。
オリジナルHTMLで、value属性を書き換えてはいけない仕組みであることがわかりました。

ビジネスパートナーは、このメールフォームをこれから先、いくつかの項目を変更しながら使い続けていきたいと考えていたため、「今後、value属性の値が変わってしまう可能性」「今後、私ではない他の誰かがオリジナルHTMLを編集する可能性」を考え、新たにID属性を追加し、その値で判定する分かりやすいソースを書くことにしました。

サンプル：Javascript 条件分岐サンプルページ

Javascript条件分岐サンプルページのソースはこちら

<!DOCTYPE HTML>
<html>
<head>
<title>Javascript 条件分岐サンプルページ</title>
</head>
<body>
<form method="post">

<table>
<tr>
<td>A保険ご加入の有無</td>
</tr>
<tr>
<td>
<label>
<input type="radio" name="A保険ご加入の有無" value="加入済" id="1a"/>加入済
</label>
<label>
<input type="radio" name="A保険ご加入の有無" value="未加入" id="1b"/>未加入
</label>
</td>
</tr>
</table>
	
<div id="box_in01" style="display:none">
A保険<span style="color:red;">加入済</span>にチェックで表示される
</div>

<div id="box_out01" style="display:none">
A保険<span style="color:blue;">未加入</span>にチェックで表示される
</div>

<hr>
	
<table>
<tr>
<td>B保険ご加入の有無</td>
</tr>
<tr>
<td>
<label>
<input type="radio" name="B保険ご加入の有無" value="加入済" id="2a"/>加入済
</label>
<label>
<input type="radio" name="B保険ご加入の有無" value="未加入" id="2b"/>未加入
</label>
</td>
</tr>
</table>
	
<div id="box_in02" style="display:none">
B保険<span style="color:red;">加入済</span>にチェックで表示される
</div>

<div id="box_out02" style="display:none">
B保険<span style="color:blue;">未加入</span>にチェックで表示される
</div>
	
<hr>
	
<table>
<tr>
<td>C保険ご加入の有無</td>
</tr>
<tr>
<td>
<label>
<input type="radio" name="C保険ご加入の有無" value="加入済" id="3a"/>加入済
</label>
<label>
<input type="radio" name="C保険ご加入の有無" value="未加入" id="3b"/>未加入
</label>
</td>
</tr>
</table>
	
<div id="box_in03" style="display:none">
C保険<span style="color:red;">加入済</span>にチェックで表示される
</div>
<div id="box_out03" style="display:none">
C保険<span style="color:blue;">未加入</span>にチェックで表示される
</div>

<hr>
	
<table>
<tr>
<td>D保険ご加入の有無</td>
</tr>
<tr>
<td>
<label>
<input type="radio" name="D保険ご加入の有無" value="加入済" id="4a"/>加入済
</label>
<label>
<input type="radio" name="D保険ご加入の有無" value="未加入" id="4b"/>未加入
</label>
</td>
</tr>
</table>
	
<div id="box_in04" style="display:none">
D保険<span style="color:red;">加入済</span>にチェックで表示される
</div>
<div id="box_out04" style="display:none">
D保険<span style="color:blue;">未加入</span>にチェックで表示される
</div>

</form>

<script>
	
// A保険ご加入の有無
document.addEventListener('change', (e)=>{
  const v=document.querySelector('[name="A保険ご加入の有無"]:checked')?.id;
  box_in01.style.display =v=="1a"?"block":"none";
  box_out01.style.display=v=="1b"?"block":"none";
});
window.addEventListener('DOMContentLoaded', ()=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('change', true, true );
  document.dispatchEvent(ce);
});
	
// B保険ご加入の有無
document.addEventListener('change', (e)=>{
  const v=document.querySelector('[name="B保険ご加入の有無"]:checked')?.id;
  box_in02.style.display =v=="2a"?"block":"none";
  box_out02.style.display=v=="2b"?"block":"none";
});
window.addEventListener('DOMContentLoaded', ()=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('change', true, true );
  document.dispatchEvent(ce);
});
	
// C保険ご加入の有無
document.addEventListener('change', (e)=>{
  const v=document.querySelector('[name="C保険ご加入の有無"]:checked')?.id;
  box_in03.style.display =v=="3a"?"block":"none";
  box_out03.style.display=v=="3b"?"block":"none";
});
window.addEventListener('DOMContentLoaded', ()=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('change', true, true );
  document.dispatchEvent(ce);
});
	
// D保険ご加入の有無
document.addEventListener('change', (e)=>{
  const v=document.querySelector('[name="D保険ご加入の有無"]:checked')?.id;
  box_in04.style.display =v=="4a"?"block":"none";
  box_out04.style.display=v=="4b"?"block":"none";
});
window.addEventListener('DOMContentLoaded', ()=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('change', true, true );
  document.dispatchEvent(ce);
});
	
</script>
	
</body>
</html>

このソースコードが、何かのお役に立てば幸いです。

追伸

今おすすめの一冊

2024年10月19日から全国で公開されているドキュメンタリー映画『五香宮の猫』の想田和弘監督の著書『なぜ僕はドキュメンタリーを撮るのか（講談社現代新書）』。
これを読めば、あなたの観察眼がこれまで以上に起動すること間違いなしです。

もしこの記事が役に立ったときは

埼玉県越谷市に向かって「ナイスだぜ、大橋プランニング。ホームページを新規で制作するとき、リニューアルするときが来たら、お前のことを必ず思い出すぜ」と囁いていただけると幸いです。
全国どこでも、メールやビデオ通話でのやり取りだけで、ご自身で手軽に自宅からでも更新することのできるホームページを制作します。
ちなみに、今のイチオシは「ワードプレスのホームページ制作」です。
お値引きさせていただきます。