現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

フォーム

【JavaScript入門】form.submit()の使い方|フォーム内容を自動送信する方法をわかりやすく解説

投稿日:2019年6月5日 更新日:

JavaScriptのform.submit()とは?フォーム内容を自動送信する方法を解説

form.submit() は、フォームの内容を JavaScript から送信するためのメソッドです。
通常は送信ボタンを押して送信しますが、スクリプトから直接送信したい場合に利用します。



submit()メソッドとは?

submit() は、フォームの内容をサーバーへ送信するメソッドです。
HTML の <input type="submit"> と同じ動作を JavaScript から実行できます。

ただし、JavaScript から強制的に送信するため、以下の点に注意が必要です。

  • 確認ダイアログを挟まず送信される場合がある
  • ブラウザによってはセキュリティ警告が出ることがある
  • onsubmit イベントが実行されないケースがある

→ 自動送信が必要な場面でのみ使用するのが一般的です。



使用例:フォームを JavaScript から送信する

フォーム名(または id)を使って submit() を呼び出します。

// フォーム form1 の内容を送信
document.form1.submit();

id を使う場合はこちら。

document.getElementById(“form1”).submit();

実際のフォーム例

<form id=”form1″ action=”send.html”>
  名前:<input type=”text” name=”user”><br>

  <input type=”button” value=”自動送信” onclick=”document.getElementById(‘form1’).submit()”>
</form>

→ ボタンを押すと、送信ボタンを押さなくてもフォームが送信されます。



まとめ

  • form.submit() はフォーム内容を JavaScript から送信するメソッド
  • 送信ボタンを押さずに送信できる
  • onsubmit が実行されない場合があるため注意が必要
  • 自動送信や条件付き送信に便利

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-フォーム
-

執筆者:

関連記事

【JavaScript入門】form.elementsの使い方|エレメント参照・種類判別・lengthの基本を解説

JavaScriptのelementsとは?フォーム内のエレメント参照方法を初心者向けに解説 form.elements は、フォーム内に含まれるすべてのエレメント(input・select・text …

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

JavaScriptのform.actionとは?フォーム送信先URLを動的に切り替える方法を解説 form.action は、フォームが送信されるURL(action属性)を参照・設定するためのプロ …

【JavaScript入門】form.targetの使い方|送信結果を表示するウィンドウ・フレームを指定する方法

JavaScriptのform.targetとは?送信結果を表示するウィンドウ・フレームを指定する方法 form.target は、フォーム送信後の結果をどのウィンドウ(またはフレーム)に表示するかを …

【JavaScript入門】value・defaultValue・textの使い方|入力値・初期値・選択肢文字列を扱う方法

JavaScriptのvalue・defaultValue・textとは?入力値と初期値、選択肢の文字列を扱う方法 value・defaultValue・text は、フォーム要素の文字列を参照/設定 …

【JavaScript入門】defaultChecked・defaultSelectedとは?フォームの初期状態を取得する方法を解説

JavaScriptのdefaultChecked・defaultSelectedとは?初期状態を取得する方法を解説 defaultChecked と defaultSelected は、フォーム要素 …