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

Anstelle einer Senden-Schaltfläche habe ich einen Link:

<form>

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

</form>

Kann ich das Formular senden lassen, wenn darauf geklickt wird?

Die beste Art

Der beste Weg ist, ein geeignetes Eingabe-Tag einzufügen:

<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 letzteren JavaScript-Code einem DOMContentLoadedEreignis hinzu (wählen Sie nur loadaus Gründen der Abwä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 onclickdem Link und iddem Formular ein Attribut 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 haben formObject.submit()irgendwann einen Aufruf (wo formObjectist das DOM-Objekt des <form>Tags).

Sie müssen auch einen solchen Ereignishandler binden, der aufruft formObject.submit(), 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 empfehlenswert ist. Ein Hauptargument ist, dass Sie Markup (HTML) mit Skripten (JS) mischen. Der Code wird unorganisiert und eher nicht mehr wartbar.

  <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 Aufruf von submit () 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.

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>

Möglicherweise möchten Sie auch ersetzen

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

mit

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

Der Benutzer scrollt also nicht zum Anfang Ihrer Seite, wenn er auf den Link klickt.

Sie können dem Formular und dem Link einige IDs geben und dann das onclickEreignis des Links und submitdes Formulars 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 empfehlen, dass Sie zum Senden von Formularen eine Schaltfläche zum Senden verwenden, da diese die Markup-Semantik berücksichtigt und auch für Benutzer mit deaktiviertem Javascript funktioniert.

HTML & CSS - Keine Javascript-Lösung

Lassen Sie Ihre Schaltfläche wie einen Bootstrap-Link erscheinen

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;

}

Dies funktioniert gut, ohne dass eine spezielle Funktion erforderlich ist. Viel einfacher mit PHP zu schreiben.<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();

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.

Hier ist die beste Lösung für Ihre Frage: Innerhalb des Formulars haben Sie diesen Code:

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

Gehen Sie in der CSS-Datei folgendermaßen vor:

button{
  display: none;
}

In JS machst du das:

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

Los geht's.