Form内容の表示非表示を切り替える

利用方法

最初にご利用のタイプをお選びください。下欄の入力内容が変わります。

 
会員種別
法人会員
会社名
代表者氏名
代表者役職
窓口担当者氏名
Eメールアドレス
会社住所
会社TEL
主な事業内容
(1)
(2)
会員種別
個人会員
氏名
Eメールアドレス
生年月日
会合
  
住所
TEL
その他
 

<form action="">
	<dl class="dlTable">
		<dt>利用方法</dt>
		<dd><p class="attention">最初にご利用のタイプをお選びください。<small>下欄の入力内容が変わります。</small></p>
			<label><input type="radio" name="entryPlan" value="法人会員" onclick="entryChange1();" checked="checked">法人会員</label> &nbsp; 
			<label><input type="radio" name="entryPlan" value="個人会員" onclick="entryChange1();">個人会員</label>
		</dd>
	</dl>

	<dl id="houjin">
		<dt>会員種別</dt><dd><span class="attention">法人会員</span></dd>
		<dt>会社名</dt><dd><input type="text"></dd>
		・・・
	</dl>

	<dl id="kojin">
		<dt>会員種別</dt><dd><span class="attention">個人会員</span></dd>
		<dt>氏名</dt><dd><input type="text"></dd>
		・・・
	</dl>

	<div class="submit_area">
		<button class="button1" type="submit" name="action" value="submit">Submit</button> &nbsp;
		<button class="button2" type="reset" name="action" value="reset">Reset</button>
	</div>
</form>

	function entryChange1(){
		radio = document.getElementsByName('entryPlan') 
		if(radio[0].checked) {
			//法人会員
			document.getElementById('houjin').style.display = "";
			document.getElementById('kojin').style.display = "none";
		}else if(radio[1].checked) {	
			//個人会員
			document.getElementById('houjin').style.display = "none";
			document.getElementById('kojin').style.display = "";
		}
	}
	window.onload = entryChange1;

TOP