HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのForm submit()メソッドとは？構文と使い方を実例付きで解説

HTML DOMのForm submit()メソッドは、フォームのデータをaction属性で指定されたアドレスへ送信するために使用されます。送信ボタンと同じ役割を果たし、フォームデータをプログラムから送信できるのが特徴です。また、このメソッドは引数（パラメータ）を一切受け取りません。

構文

Form submit()メソッドの構文は以下のとおりです。

formObject.submit()

サンプルコード

Form submit()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function SubmitForm() {
      document.getElementById("FORM1").submit();
      document.getElementById("Sample").innerHTML = "フォームが送信されました";
   }
</script>
</head>
<body>
<h1>Form submit()メソッドの例</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
<p id="Sample"></p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOMのForm submit()メソッドとは？構文と使い方を実例付きで解説

SUBMITボタンをクリックするとフォームが送信され、action属性に指定された「sample_page.php」が次のように表示されます。

HTML DOMのForm submit()メソッドとは？構文と使い方を実例付きで解説

コードの解説

この例では、以下のような流れで処理が行われています。

まず、id="FORM1"、method="post"、action="/sample_page.php"を持つフォームを作成しています。フォーム内には、テキスト型の入力フィールドが2つと、SUBMITという名前のボタンが配置されています。

<form id="FORM1" method="post" action="/sample_page.php">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>

SUBMITボタンがユーザーによってクリックされると、SubmitForm()関数が実行されます。

<input type="button" onclick="SubmitForm()" value="SUBMIT">

SubmitForm()関数内では、documentオブジェクトのgetElementById()メソッドを使って<form>要素を取得し、その要素に対してsubmit()メソッドを呼び出しています。これにより、フォームデータがaction属性で指定されたアドレスへ送信されます。

function SubmitForm() {
   document.getElementById("FORM1").submit();
}

まとめ

Form submit()メソッドを使えば、送信ボタンを使用せずにJavaScriptからフォームを送信できます。ユーザーの操作や特定の条件をきっかけにフォームを自動送信したい場合に非常に便利なメソッドです。

  1. HTML DOM フォームの reset() メソッドとは？使い方とサンプルコードを解説

    HTML DOM の Form reset() メソッドは、フォーム内のすべての入力値を初期化し、各フォーム要素の value 属性で指定されたデフォルト値を再表示するためのメソッドです。いわば「リセットボタン」として機能し、フォームに入力されたデータを一括でクリアできます。なお、このメソッドは引数（パラメータ）を一切受け取りません。構文Form オブジェクトの reset() メソッドの基本的な構文は以下のとおりです。formObject.reset()使用例ここでは、reset() メソッドを使った具体的なサンプルコードを見てみましょう。<!DOCTYPE html> <

  2. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ