JavaScriptのform.actionとは？フォーム送信先URLを動的に切り替える方法を解説
form.action は、フォームが送信されるURL（action属性）を参照・設定するためのプロパティです。
JavaScript を使うことで、ユーザーの選択内容に応じて送信先を変更するなど、柔軟なフォーム処理が可能になります。
actionプロパティとは？
action は、フォーム送信時にデータを送るURLを指定するプロパティです。
HTML の action="" と同じ役割を持ちますが、JavaScript を使うことで送信先を動的に変更できます。
- 送信先URLの取得
- 送信先URLの変更
- ユーザーの選択に応じた送信先の切り替え
使用例：選択内容に応じて送信先を変更する
以下の例では、ラジオボタンで「感想」か「質問」を選ぶと、送信先が自動的に切り替わります。
<head>
<title>JavaScript Sample</title>
<script>
function sendForm() {
const formElem = document.getElementById(“form1”);
// 「感想」が選択された場合
if (formElem.radio1[0].checked) {
if (!confirm(“送信内容はご感想でよろしいですか？”)) return false;
formElem.action = “impression.html”;
}
// 「質問」が選択された場合
if (formElem.radio1[1].checked) {
if (!confirm(“送信内容はご質問でよろしいですか？”)) return false;
formElem.action = “question.html”;
}
}
</script>
</head>
<body>
<form id=”form1″ onsubmit=”return sendForm()”>
<p>
<input type=”radio” name=”radio1″ checked> 感想
<input type=”radio” name=”radio1″> 質問
</p>
<p><textarea name=”text” cols=”30″ rows=”5″></textarea></p>
<p>
<input type=”submit” value=”送信”>
<input type=”reset” value=”クリア”>
</p>
</form>
</body>
</html>
→ ラジオボタンの選択に応じて form.action が切り替わります。
送信先ページの例
question.html
impression.html
JavaScript 初心者におすすめの学習書籍
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→ いちばんやさしい JavaScript の教本
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
まとめ
form.actionはフォームの送信先URLを参照・設定するプロパティ- JavaScript を使うと送信先を動的に変更できる
- ユーザーの選択内容に応じた送信先切り替えが可能
- 実務でもよく使われるフォーム制御の基本
