ywork2020.com

Title

action属性を操作する

目次 (INDEX)

actionとは

ここで説明するaction とは次の語句からなるjavascriptのプロパティです。
action
読み: アクション
意味: 行動、活動、行為、動作

目次に戻る

actionプロパティの概要

このプロパティは、 form 要素のaction属性の値を取得、または設定することができます。

action 属性は、フォームのデータが送信される場合の送信先のURLを設定するためにあります。

目次に戻る

構文

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

var strURL = form.action;
form.action = strURL;

目次に戻る

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

ここでは、form要素につけてあるaction属性の値を取得してoutput要素に表示しています。

サンプルコード: HTML
<body>
	<form action="./js-htmlformelement-action.html" method="GET" name="myForm">
		<div><input type="text" value="sampleText" name="myText"></div>
		<div><input type="number" value="123" name="myNumber"></div>
		<div><input type="submit" value="送信" disabled></div>
	</form>
	<p>
		送信前のURL:<br>
		<output id="idOutput">innerText</output>
	</p>
</body>
  • 02-06: form (action属性 = このページのURLを相対参照で指定しています。つまり、このフォームからデータを送信した場合には、このページをリロードしてデータを受け取ることになります。)
  • 03: input type="text" (送信したデータは、URLの後に続き「?myText=sampleText」として添付されます。)
  • 04: input type="number" (送信したデータは、URLの後に続き「?myNumber=123」として添付されます。)
  • 03-04: 補足 (03と04行の送信したデータは、2つ合わせるとURLの後に続き「?myText=sampleText&myNumber=123」として添付されます。)
  • 05: input type="submit" (送信ボタンです。disabled属性を付けて、このボタンでは送信できないように設定しています。)
  • 09: output (結果を出力するための要素です。ここには action属性の値をscriptで取得して表示します。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = document.forms.namedItem("myForm").action;
</script>
  • 02: elmOutput (変数です。ここでは識別子=idOutputの要素をElementオブジェクトとして取得します。)
  • 03: .action (action属性の値を取得してoutput要素に書き出します。)
実行結果:

送信前のURL:
innerText

送信後のURL: (こちらの結果はサンプルコードに含んでいません。)
innerText

目次に戻る