[解決済み] JavaScriptでリンクをクリックし、フォームを送信するには？

質問

送信ボタンの代わりにリンクがあります。

<form>

  <a href="#"> submit </a>

</form>

クリックされたときにフォームを送信するようにできますか？

解決方法は？

最適な方法

最適な方法は、適切なinputタグを挿入することです。

<input type="submit" value="submit" />

最適なJSの方法

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

後者のJavaScriptコードは DOMContentLoaded イベント（ load に対して 後方互換性 ) をまだ実行していないのであれば、ぜひ実行してみてください。

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

簡単でお勧めできない方法（前者の答え）

を追加します。 onclick 属性をリンクに追加し id をフォームに追加します。

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

すべての方法

どのような方法であれ、あなたは電話をかけています。 formObject.submit() いずれは（ここで formObject のDOMオブジェクトです。 <form> タグ)を使用します。

また、このようなイベントハンドラをバインドする必要があり、そのハンドラは formObject.submit() そのため、ユーザーが特定のリンクまたはボタンをクリックしたときに呼び出されます。方法は2つあります。

• おすすめです。 DOM オブジェクトにイベントリスナーをバインドする。

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });
  
  

• 推奨しません。 インラインのJavaScriptを挿入します。この手法が推奨されない理由はいくつかあります。大きな理由のひとつは、マークアップ（HTML）とスクリプト（JS）を混在させることになるからです。コードが整理されなくなり、むしろメンテナンスができなくなります。

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>
  
  

さて、submit()の呼び出しをトリガーするUI要素を決めなければならない時点に来ました。

1. ボタン

   <button>submit</button>
   
   

2. リンク

   <a href="#">submit</a>
   
   

前述のテクニックを応用して、イベントリスナーを追加します。