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

フォーム取得（２）他ＨＴＭＬへのリンク

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

実行例

ソースリスト

スクリプト

<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;
	
       	
	// 他ＵＲＬへのリンク （getform1 にこの部分を追加）
	var ＵＲＬ = "getform2-receive.html";
	var パラメタ = "?宛先=" + textboxValue
			+ "&質問=" + textareaValue
			+ "&経験=" + radioValue
			+ "&ブラウザ=" + checkboxValue
			+ "&目的=" + selectValue;
        alert("送った電文" + ＵＲＬ + パラメタ);
	location.href = ＵＲＬ + パラメタ;
       
    }
</script>

ＨＴＭＬ

    <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>