window.locationオブジェクトGET送信によるパラメータの受け渡し
- URLの？以降を取得〔searchプロパティ〕
- 他のページへ入力内容を渡す〔searchプロパティ使用〕
URLの？以降を取得
searchプロパティ
unknown
window.location.search
searchプロパティは、現在のURLの？以降の文字列を取得します。
オブジェクト名windowは省略可。
サンプルを見る
<script type="text/javascript">
function getdata(){
if(window.location.search){
/* URLの「?」以降のパラメータを変数nに代入 */
var n=window.location.search.substring(1,window.location.search.length);
/* テキストボックスにパラメータを表示 */
document.form3.elements["getpram"].value=n;
}
}
/* オンロード時に実行 */
window.onload=getdata;
</script>
<form name="form3" action="#">
取得したパラメータ：<input type="text" name="getpram" size="50" />
</form>
他のページへ入力内容を渡す
searchプロパティ使用
unknown
searchプロパティを使用して、送信先画面にパラメータから受取った情報をフォームに書き出す例です。 フォームの入力状態を送信先のフォームに確認用として表示するのに便利です。
オブジェクト名windowは省略可。
パラメータを渡す側
サンプルを見る
<script type="text/javascript">
/* パラメータを渡す側 */
function send() {
var name="";
var sex="";
var favorite="";
/* 名前(コード変換) */
if (document.form1.name.value!=""){
name=escape(document.form1.name.value);
}
/* 性別 */
if(document.form1.sex[0].checked){
sex=escape(document.form1.sex[0].value);
}else if(document.form1.sex[1].checked){
sex=escape(document.form1.sex[1].value);
}
/* 興味 */
for(i=1;i<=4;i++){
if(document.form1.elements["favorite"+i].checked){
favorite+=document.form1.elements["favorite"+i].value+" ";
}
}
favorite=escape(favorite);
/* 取得した値をパラメータにセット(アンパサンド'&'で連結) */
var pram="name="+name+"&sex="+sex+"&favorite="+favorite;
/* アドレスにパラメータを付加 */
location.href="/module/include/js/location4/test2.html?"+pram;
return false;
}
</script>
<!-- ★送信フォーム [start] -->
<form action="#" method="get" name="form1" onsubmit="return send();">
<fieldset>
<legend>パラメータに渡す値を入力</legend>
<p>
名前：<input type="text" name="name" value="" size="20" />
</p>
<p>
性別：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</p>
<p>
趣味：
<input type="checkbox" name="favorite1" value="スポーツ" />スポーツ
<input type="checkbox" name="favorite2" value="映画鑑賞" />映画鑑賞
<input type="checkbox" name="favorite3" value="音楽鑑賞" />音楽鑑賞
<input type="checkbox" name="favorite4" value="仕事！" />仕事！
</p>
<p>
<input type="submit" value="送信" />
</p>
</fieldset>
</form>
<!-- ★送信フォーム [end] // -->
パラメータを受取る側
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>PHP & JavaScript Room: test2.html</title>
<script type="text/javascript">
/* パラメータを受取る側 */
function pramWrite() {
/* アドレスの「?」以降の引数(パラメータ)を取得 */
var pram=location.search;
/* 引数がない時は処理しない */
if (!pram) return false;
/* 先頭の?をカット */
pram=pram.substring(1);
/* 「&」で引数を分割して配列に */
var pair=pram.split("&");
var i=temp="";
var key=new Array();
for (i=0; i < pair.length; i++) {
/* 配列の値を「=」で分割 */
temp=pair[i].split("=");
keyName=temp[0];
keyValue=temp[1];
/* キーと値の連想配列を生成 */
key[keyName]=keyValue;
}
var name=sex=favorite="";
/* 名前 */
if (!key["name"] || key["name"]==""){
name="匿名希望";
}else{
/* コード変換 */
name=unescape(key["name"]);
}
/* 性別 */
if(key["sex"]!="") {
sex=unescape(key["sex"]);
}else{
sex="性別不明";
}
/* 興味 */
if(key["favorite"]){
favorite=key["favorite"];
}else{
favorite+="無趣味";
}
document.form1.pram.value="名前："+name+"\n"+"性別："+sex+"\n"+"趣味："+unescape(favorite)+"\n";
}
</script>
</head>
<body onload="pramWrite()">
<form name="form1" action="#">
<fieldset>
<legend>受け取ったパラメータを表示</legend>
<textarea cols="40" rows="4" name="pram" style="border:0;overflow:visible" readonly="readonly"></textarea>
</fieldset>
</form>
</body>
</html>