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

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.