ywork2020.com

Title

formの送信先ページの表示方法を操作する

目次 (INDEX)

targetとは

ここで説明するtarget とは次の語句からなるjavascriptのプロパティです。
target
読み: ターゲット
意味: 標的、対象

目次に戻る

targetプロパティの概要

このプロパティは、 form 要素の target 属性の値を取得、または設定します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var strSendTarget = form.target;
form.target = strSendTarget;

目次に戻る

サンプルコードと実行結果

ここではformからデータを他のページに送信するサンプルを用意しました。 このフォームは送信先のページを、どのターゲットウィンドウで表示するか、選択できるようにしています。 ターゲットの種類は以下の通りです。

  • _self
    既定値です。閲覧しているページから新たにウィンドウが開かず、閲覧しているページがリンク先に代わり表示されます。
  • _blank
    新しいブラウジング・コンテキストを開いてリンク先を表示します。
  • _parent
    現在閲覧しているウィンドウの親があれば、その親のウィンドウにリンク先が表示されます。
  • _top
    閲覧しているページの祖先のブラウザにリンク先が表示されます。親の閲覧ブラウジング・コンテキストがない場合には、_selfと同じように動作します。
サンプルコード: HTML
<body>
	<form name="namForm" target="_self" action="送信先ページのURL" method="GET">
		<div><input type="text" value="サンプルテキスト" name="sendData"></div>
		<div>
			<select onchange="func(this.value)">
				<option value="_self">_self</option>
				<option value="_blank">_blank</option>
				<option value="_parent">_parent</option>
				<option value="_top">_top</option>
			</select>
		</div>
		<div><input type="submit" value="送信"></div>
	</form>
</body>
  • 02-13: form (name="namForm"をもつform要素です。 この要素のtarget属性の値を操作します。)
  • 05-10: select (onchange="func(this.value)の部分で、この要素に変化があればscriptコードの02:行目の関数が実行されます。)
サンプルコード: script
<script>
	function func(strTarget){
		document.forms.namedItem("namForm").target = strTarget;
	}
</script>
  • 02-4: func(strTarget) (関数です。HTMLコードの05:行目のselect要素のonchange属性で呼び出されます。)
  • 03: namedItem("namForm").target (form要素のtargetにターゲットキーワードを代入しています。)
実行結果:

送信データの設定: name="sendData"

ターゲットの選択:

送信の実行:

目次に戻る