JavaScriptのform.actionとは？フォーム送信先URLを動的に切り替える方法を解説

form.action は、フォームが送信されるURL（action属性）を参照・設定するためのプロパティです。
JavaScript を使うことで、ユーザーの選択内容に応じて送信先を変更するなど、柔軟なフォーム処理が可能になります。

actionプロパティとは？

action は、フォーム送信時にデータを送るURLを指定するプロパティです。
HTML の action="" と同じ役割を持ちますが、JavaScript を使うことで送信先を動的に変更できます。

送信先URLの取得
送信先URLの変更
ユーザーの選択に応じた送信先の切り替え

使用例：選択内容に応じて送信先を変更する

以下の例では、ラジオボタンで「感想」か「質問」を選ぶと、送信先が自動的に切り替わります。

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

→ ラジオボタンの選択に応じて form.action が切り替わります。

送信先ページの例

question.html

<p>質問の送信先</p>

impression.html

<p>感想の送信先</p>

JavaScript 初心者におすすめの学習書籍

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→　いちばんやさしい JavaScript の教本

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→　確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ（スクールという選択肢）

独学の限界を感じやすいポイント

エラーの原因が分からず、調べても解決できない
学習の順番に自信が持てない
モチベーションが続かず、途中で止まってしまう
実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
独学で詰まりやすいポイントを事前に教えてくれる
学習方法の改善点をプロがアドバイスしてくれる
エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

→ DMM WEBCAMP 学習コース（無料相談はこちら）

まとめ

form.action はフォームの送信先URLを参照・設定するプロパティ
JavaScript を使うと送信先を動的に変更できる
ユーザーの選択内容に応じた送信先切り替えが可能
実務でもよく使われるフォーム制御の基本

【JavaScript入門】form.actionの使い方｜フォーム送信先URLを動的に変更する方法を初心者向けに解説