[JavaScript] Submitアクションを起こす

投稿日：2016年10月10日更新日：2018年5月2日

JavaScriptからSubmitするには、submit()を使用します。

サンプルソース

例）リンクをクリックすると、フォーム（"fm1"）をSubmitする

function submitFnc(){
  //formオブジェクトを取得する
  var fm = document.getElementById("fm1");

  //Submit値を操作したい場合はこんな感じでできます。
  fm.hid1.value = "hoge";  // 例）name="hid1"の値を"hoge"にする

  //Submit形式指定する（post/get）
  fm.method = "post";  // 例）POSTに指定する

  //targetを指定する
  fm.target = "_blank";  // 例）新しいウィンドウに表示

  //action先を指定する
  fm.action = "/php/sample.php";  // 例）"/php/sample.php"に指定する

  //Submit実行
  fm.submit();
}

function submitFnc(){

//formオブジェクトを取得する

var fm = document.getElementById("fm1");

//Submit値を操作したい場合はこんな感じでできます。

fm.hid1.value = "hoge"; // 例）name="hid1"の値を"hoge"にする

//Submit形式指定する（post/get）

fm.method = "post"; // 例）POSTに指定する

//targetを指定する

fm.target = "_blank"; // 例）新しいウィンドウに表示

//action先を指定する

fm.action = "/php/sample.php"; // 例）"/php/sample.php"に指定する

//Submit実行

fm.submit();

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
<form id="fm1">
  <input type="text" name="txt1">
  <input type="hidden" name="hid1">
</form>
<a href="javascript:submitFnc();">Submitする</a>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</form>

<a href="javascript:submitFnc();">Submitする</a>

</body>

</html>

解説

Submitしたいformオブジェクトに対して.submit()を行えばOKです。
これを使えばsubmitボタンを使わなくても、さまざまなイベントからsubmitすることができます。
Submit時に、disableとなっている要素の値は送信されません。
targetは以下の値が指定できます。

【targetの値】
値	意味
_self	自画面に表示
_blank	新規画面を開いて表示
_top	フレームを解除して画面全体に表示
_parent	呼び出し元の親画面に表示

執筆者：とら