リンクをクリックしてJavaScriptでフォームを送信するにはどうすればいいですか? 質問する

リンクをクリックしてJavaScriptでフォームを送信するにはどうすればいいですか? 質問する

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

<form>

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

</form>

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

ベストアンサー1

一番いい方法

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

<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コードをイベントで囲みますDOMContentLoadedload下位互換性) をまだ行っていない場合は、次の手順に従ってください。

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 を挿入します。この手法が推奨されない理由はいくつかあります。主な理由の 1 つは、マークアップ (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>
    

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

おすすめ記事