it-swarm.com.de

Wie reiche ich ein Formular mit JavaScript ein, indem ich auf einen Link klicke?

Anstelle eines Submit-Buttons habe ich einen Link:

<form>

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

</form>

Kann ich dafür sorgen, dass das Formular gesendet wird, wenn es angeklickt wird?

113
sandy

Die beste Weise

Am besten fügen Sie ein entsprechendes Input-Tag ein:

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

Der beste JS-Weg

<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();
});

Fügen Sie den zuletzt genannten JavaScript-Code in ein DOMContentLoaded -Ereignis ein (wählen Sie nur load für Rückwärtskompatibilität ), falls Sie dies noch nicht getan haben:

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

Der einfache, nicht empfehlenswerte Weg (die frühere Antwort)

Fügen Sie dem Link ein onclick Attribut und dem Formular ein id hinzu:

<form id="form-id">

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

</form>

Alle Wege

Wie auch immer Sie sich entscheiden, Sie müssen schließlich formObject.submit() aufrufen (wobei formObject das DOM-Objekt des Tags <form> Ist).

Sie müssen auch einen solchen Ereignishandler binden, der formObject.submit() aufruft, damit er aufgerufen wird, wenn der Benutzer auf einen bestimmten Link oder eine bestimmte Schaltfläche klickt. Es gibt zwei Möglichkeiten:

  • Empfohlen: Binden Sie einen Ereignis-Listener an das DOM-Objekt.

    // 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();
    });
    
  • Nicht empfohlen: Inline-JavaScript einfügen. Es gibt mehrere Gründe, warum diese Technik nicht zu empfehlen ist. Ein Hauptargument ist, dass Sie Markup (HTML) mit Skripten (JS) mischen. Der Code wird unorganisiert und eher nicht mehr zu pflegen.

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

Nun kommen wir zu dem Punkt, an dem Sie sich für das UI-Element entscheiden müssen, das den submit () -Aufruf auslöst.

  1. Ein Knopf

    <button>submit</button>
    
  2. Eine Verbindung

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

Wenden Sie die oben genannten Techniken an, um einen Ereignis-Listener hinzuzufügen.

194
ComFreek

Wenn Sie jQuery verwenden und eine Inline-Lösung benötigen, funktioniert dies sehr gut.

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

Vielleicht möchten Sie auch ersetzen

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

mit

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

der Benutzer scrollt also beim Klicken auf den Link nicht an den oberen Rand Ihrer Seite.

64
Maurice

Sie könnten dem Formular und dem Link einige IDs geben und dann das Ereignis onclick des Links und submit das Formular abonnieren:

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

und dann:

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

Ich würde Ihnen empfehlen, eine Senden-Schaltfläche zum Senden von Formularen zu verwenden, da diese die Markup-Semantik respektiert und auch für Benutzer mit deaktiviertem Javascript funktioniert.

21
Darin Dimitrov

HTML & CSS - Keine Javascript-Lösung

Stellen Sie sicher, dass Ihre Schaltfläche wie ein Bootstrap Link angezeigt wird

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();

In meinem Fall funktioniert es perfekt.

sie können es in Funktion auch wie verwenden,

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

Legen Sie "theForm" als Formular-ID fest. Es ist fertig.

1
ChintanThummar

dies funktioniert gut, ohne dass eine spezielle Funktion benötigt wird. Viel einfacher mit PHP zu schreiben. <input onclick="this.form.submit()"/>

1
chris

hier ist die beste Lösung für Ihre Frage: In dem Formular haben Sie diesen Code:

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

führen Sie in der CSS-Datei Folgendes aus:

button{
  display: none;
}

in JS machst du das:

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

Es geht los.

0
iamwave007