JavaScriptでフォームの送信先を操作する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでフォームの送信先を操作する方法について現役エンジニアが解説しています。フォームの送信先は、action属性に設定されたURLになります。JavaScriptで送信先を操作するには、submitボタンが押された時にaction属性を変更するようにします。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでフォームの送信先を操作する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでフォームの送信先を操作する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

フォームオブジェクト(form)とは

HTMLのformタグで囲われた箇所をプログラムで取得したものになります。formタグは会員登録の画面などで入力項目と送信ボタンを囲うHTMLタグです。

今回はJavaScriptでこのformタグを取得し(フォームオブジェクト)、操作をしてみます。

フォームオブジェクトのactionとは

actionはHTMLのformタグの属性です。actionには主に入力項目の送信先URLを下記のように指定して使用します。

<form action="https://techacademy.jp/">

これにより画面の送信ボタンなどを押した際に、formタグで囲われた入力欄の値が指定したURLに送られます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでフォームの送信先を設定する方法

基本的な処理は下記の2つです。

1、formタグをJavaScriptで取得する
2、取得したformオブジェクトのactionを書き換える

formタグのactionにURLを設定してあるので、送信ボタンなどを押せば設定したURLに入力内容は送信されるのですが、入力内容に応じて送信先を変更したい場合などはこの方法で書き換えると便利です。

実際に書いてみよう

HTMLのソースコード

メールアドレスで会員登録するような画面を簡易的に記述しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <form action="【送信先URL】" id="formId" onsubmit="changeAction()">
      メールアドレス <input type="text">
      <input type="submit" value="送信する">
    </form>
  </body>
</html>

 

JavaScriptのソースコード

送信先のURLを書き換える処理です。

function changeAction(){
  var formObject = document.getElementById('formId');
  formObject.action = "【送信先URL】";
}

 

解説

HTMLのformタグの属性で「onsubmit=”changeAction()”」としたことで、送信するボタンを押した際にJavaScriptのchangeActionという関数が呼び出されます。

JavaScriptの関数changeActionでは、「document.getElementById(‘formId’);」とHTMLのformタグのidを指定することでformオブジェクトを取得しています。

後は「formObject.action = “【送信先URL】”;」のようにactionの指定URLを書き換えるだけです。

これにより、書き換えたURLに入力した値(ここではメールアドレス)が送信されます。もちろん書き換えなければHTMLのformタグに指定した送信先URLに送信となります。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。