フォーム取得（１）基本

FORMで入力／選択した値をJavascriptで取得する例を掲げます。

実行例

入力結果がここに表示されます。

ソース

form

ここでは、次の制約があるものとします。

同一フォーム内での入力／選択項目のnameは一意にします。例えば「経験年数」と「ご利用ブラウザ」で同じnameにしてはいけません。
それぞれの入力／選択項目では同一のnameにします。例えば「経験年数」では３つのラジオボタンがありますが、すべてnameを「経験」とします。

<form name="フォーム１">
	<p>テキストボックス<br>
	<label>メールアドレス：<input type="text" name="宛先" size="40"></label></p>
	
	<p>テキストエリア<br>
	質問内容：<textarea name="質問" cols="40" rows="6"></textarea></p>
	
	<p>ラジオボタン<br>
	経験年数：
		<label><input type="radio" name="経験" value="初心者">1年未満</label>　
		<label><input type="radio" name="経験" value="中級者">２年以上～５年未満</label>　
		<label><input type="radio" name="経験" value="上級者">５年以上</label>　
	</p>
	
	<p>チェックボックス<br>
	ご利用ブラウザ（複数選択可）：
		<label><input type="checkbox" name="ブラウザ" value="ie">Internet Explorer</label>　
		<label><input type="checkbox" name="ブラウザ" value="gc">Google Chrome</label>　
		<label><input type="checkbox" name="ブラウザ" value="mf">Firefox</label>　
		<label><input type="checkbox" name="ブラウザ" value="as">Safari</label>　
		<label><input type="checkbox" name="ブラウザ" value="other">その他</label>　
	</p>
	
	<p>プルダウンメニュー<br>
	ご質問の目的：
		<select name="目的">
			<option>選択してください</option>
			<option value="開発">Ｗｅｂページ作成のため</option>
			<option value="学習">ＨＴＭＬ学習のため</option>
			<option value="不明">その他の理由</option>
		</select>
	</p>
	
	<p><input type="button" value="入力" onClick="getform()">　
	<input type="reset" value="リセット"></p>
	
</form>

style

テキストエリアでは見出しの「質問内容」を入力欄の上部と合わせるために、次のＣＳＳを入れてあります（これがないと下部に合わせられます）。

<style>
    textarea{vertical-align:top;}
</style>

script

入力結果（value）は、次の変数に格納されます。
　　テキストボックス　　textValue
　　テキストエリア　　　textareaValue
　　ラジオボタン　　　　radioValue
　　チェックボックス　　checkboxValue
　　プルダウンメニュー　selectValue
入力／選択がない場合は、それぞれの変数の値は "" になります。

これらの変数を他のfunctionで処理するために、これらの変数をグローバル変数にするのが通常だと考えて、このfunctionではvar定義をしていません。

チェックボックスで複数個が選択されたとき、選択項目間の区切記号は、変数「区切記号」で指定します。

<script type="text/javascript">
    function getform() {
	var i;     // 検索用添字
	
	// テキストボックス(type="text" name="宛先"）
	textboxValue = document.フォーム１.宛先.value;
	
	// テキストエリア（type="textarea name="質問"）
	textareaValue = document.フォーム１.質問.value;
	
	// ラジオボタン（type="radio" name="経験"）
	radioValue = "";    // どれも選択されていないときは "" を戻す
	var radioList = document.フォーム１.経験;
	for(i=0; i<radioList.length; i++){
		if (radioList[i].checked) {
			radioValue = radioList[i].value;
			break;
		}
	}
	
	// チェックボックス（type="checkbox" name="ブラウザ"）複数選択可
	checkboxValue = "";    // どれも選択されていないときは "" を戻す
	var 区切記号 = ",";      // 選択項目間の区切記号
	var checkKosu = 0;     // 選択項目数
	var checkboxList = document.フォーム１.ブラウザ;
	for(i=0; i<checkboxList.length; i++){
		if (checkboxList[i].checked) {
			checkKosu ++;
			if (checkKosu == 1) checkboxValue += checkboxList[i].value;
			else checkboxValue += 区切記号 + checkboxList[i].value;
		}
	}
	
	// プルダウンメニュー （select name="目的"）単一選択
	var selectList = document.フォーム１.目的;
	var selectIndex = selectList.selectedIndex;
	selectValue = selectList[selectIndex].value;
    }
</script>