web-dev-qa-db-ja.com

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

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

<form>

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

</form>

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

javascripthtmlformshyperlink
112
sandy

一番いい方法

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

<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は<form>タグのDOMオブジェクトです）。

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>

イベントリスナを追加するために前述のテクニックを適用して下さい。

192
ComFreek

JQueryを使用していてインラインソリューションが必要な場合は、これでうまくいきます。

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

また、交換することがあります

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

と

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

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

63
Maurice

フォームとリンクにいくつかの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が無効になっているユーザーでも機能するため、フォームの送信には送信ボタンを使用することをお勧めします。

21
Darin Dimitrov

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;

}
3
Darren Murphy
document.getElementById("theForm").submit();

私の場合は完璧に機能します。

あなたも機能的にそれを使用することができます、

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

フォームIDとして "theForm"を設定します。完了しました。

1
ChintanThummar

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

1
chris

これがあなたの質問に対する最善の解決策です：フォームの中にあなたはこれらのコードがあります：

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

cSSファイルでは、これをして下さい：

button{
  display: none;
}

jSではこれを行います。

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

そこに行きます。

0
iamwave007