リンクをクリックしてJavaScriptを含むフォームを送信する方法

送信ボタンの代わりに私はリンクを持っています：

<form>

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

</form>

クリック時にフォームを送信させることはできますか？

最良の方法

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

<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()最終的には呼び出します（タグのformObjectDOMオブジェクトはどこですか<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>

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

jQueryを使用していてインラインソリューションが必要な場合、これは非常にうまく機能します。

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

また、あなたは交換したいかもしれません

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

と

<a href="javascript:void(0);">text</a>

そのため、ユーザーはリンクをクリックしてもページの上部にスクロールしません。

フォームとリンクにいくつかのID onclickを指定して、リンクとsubmitフォームのイベントをサブスクライブできます。

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

その後：

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

フォームの送信には送信ボタンを使用することをお勧めします。マークアップのセマンティクスが尊重され、JavaScriptが無効になっているユーザーでも機能するためです。

HTML＆CSS-JavaScriptソリューションなし

ボタンをブートストラップリンクのように表示する

HTML：

<form>
    <button class="btn-link">Submit</button>
</form>

CSS：

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

これは、特別な機能を必要とせずにうまく機能します。phpで書く方がはるかに簡単です。<input onclick="this.form.submit()"/>

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

document.getElementById("theForm").submit();

それは私の場合には完璧に動作します。

次のような機能でも使用できます。

function submitForm()
{
     document.getElementById("theForm").submit();
} 

「theForm」をフォームIDとして設定します。終わった。

これがあなたの質問への最良の解決策です：フォーム内にこれらのコードがあります：

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

CSSファイルで次のようにします。

button{
  display: none;
}

JSではこれを行います：

$("a").click(function(){
   $("button").trigger("click");
})

どうぞ。