スタートページJavascriptフォーム取得

フォーム取得(2)他HTMLへのリンク

「フォーム取得(1)」で入力/選択した値を、「リンクでのパラメタ受け渡しテスト」での「名称付のパラメタ渡し 例2 値を名称の関数として受け取る」の形式で、getform2-receive.htmlへ渡します。


実行例

テキストボックス

テキストエリア
質問内容:

ラジオボタン
経験年数:      

チェックボックス
ご利用ブラウザ(複数選択可):          

プルダウンメニュー
ご質問の目的:

 


ソースリスト

スクリプト

<script type="text/javascript"> 
    function getform() {
	var i;     // 検索用添字
	
	// テキストボックス(type="text" name="宛先")
	textboxValue = document.フォーム1.宛先.value;
	
	// テキストエリア(type="textarea name="質問")
	textareaValue = document.フォーム1.質問.value;
	
	// ラジオボタン(type="radio" name="経験")
	radioValue = "";    // どれも選択されていないときは "" を戻す
	var radioList = document.フォーム1.経験;
	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.フォーム1.ブラウザ;
	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.フォーム1.目的;
	var selectIndex = selectList.selectedIndex;
	selectValue = selectList[selectIndex].value;
	
       	
	// 他URLへのリンク (getform1 にこの部分を追加)
	var URL = "getform2-receive.html";
	var パラメタ = "?宛先=" + textboxValue
			+ "&質問=" + textareaValue
			+ "&経験=" + radioValue
			+ "&ブラウザ=" + checkboxValue
			+ "&目的=" + selectValue;
        alert("送った電文" + URL + パラメタ);
	location.href = URL + パラメタ;
       
    }
</script>

HTML

    <form name="フォーム1">
	<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="中級者">2年以上~5年未満</label> 
		<label><input type="radio" name="経験" value="上級者">5年以上</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="開発">Webページ作成のため</option>
			<option value="学習">HTML学習のため</option>
			<option value="不明">その他の理由</option>
		</select>
	</p>
	
	<p><input type="button" value="入力" onClick="getform()"> 
	<input type="reset" value="リセット"></p>
	
    </form>