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


123

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?


Ich verwende dies, um ein vollständig verstecktes Formular in eine Seite zu integrieren. Es gibt jedoch Zeilenumbrüche vor und nach dem Link. Kommen sie aus dem Formularelement? Und ich möchte den Link in einem neuen Tab / einer neuen Seite öffnen, target="_blank"scheint nicht zu funktionieren.
JPT

1
tl; dr <a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a>
Josh Habdas

Antworten:


209

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.


Ich wollte das anwenden, aber es scheint auf meiner Seite nicht zu funktionieren. Hier ist eine Geige, jsfiddle.net/rbhr9wt2
user1149244

@ user1149244 Klicken Sie im JavaScript-Bereich von jsFiddle auf "JavaScript" und setzen Sie "Load Type" auf "No wrap - in <body>" (oder <head>). Standardmäßig ist "onLoad" eingestellt, danach wird DOMContentReady nicht mehr ausgelöst.
ComFreek

3
Hinweis: Wenn Ihr Formular über eine Schaltfläche mit attr verfügt name="submit", kann auf die submit()Methode Ihres Formulars nicht zugegriffen werden.
2540625

Warum wird die Onclick-Methode nicht empfohlen?
Nu Everest

@nueverest An <input type="submit">hat eine semantischere Bedeutung als beispielsweise <a href="#" onclick="...">. Dies ist besonders wichtig bei Screenreadern. Wenn Sie Letzteres verwenden müssen, würde ich vorschlagen, ARIA zu verwenden .
ComFreek

65

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.


1
Ich glaube, es wäre vorzuziehen, es in einem <span> -Text </ span> zu machen. Es ist kein Link und href: Javascript ist nicht gut. (bald aus den nächsten Sicherheitsgründen schlecht werden ... Inline-Javascript soll eines Tages verboten werden.
Milche Patern

Genau. Nach der Art der Frage zu urteilen, entschied ich mich für die einfache Antwort. Ich persönlich verwende href="#"und wähle dann alle diese Links mit jquery aus und rufe e.preventDefault()den clickEreignishandler auf, damit der Browser nicht scrollt.
Maurice

3
Ich persönlich bevorzuge diese Antwort. Einfach und sauber und einfach zu implementieren, wenn Ihre Seite JQuery verwendet. Sehr flexibel, da ich eine Seite mit mehreren Formularen habe und sie einwandfrei funktioniert.
John Contarino

Man kann href = "#" verwenden, wenn man am Ende des OnClick-Javascript-Aufrufs "return false"
hinzufügt

23

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.


4

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;

}

Ausgezeichnet, warum es kompliziert machen, wenn es einfach sein kann. Ich denke jedoch, dass es noch besser aussieht, wenn Sie auch "cursor: pointer;" hinzufügen. In der Hover-Klasse verwandelt sich der Cursor in die Hand.
Lumis

3

Dies funktioniert gut, ohne dass eine spezielle Funktion erforderlich ist. Viel einfacher mit PHP zu schreiben.<input onclick="this.form.submit()"/>


OP angegeben durch Klicken auf einen Link nicht Eingabeelement.
Rahil Wazir

Kann das funktionieren, indem man so etwas wie<input onclick="this.form.submit()"> Some Text</input>
CodyBugstein

2
<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>

3
Können Sie erklären, wie Ihre Antwort die Frage tatsächlich beantwortet? Fügen Sie bitte mehr Kontext hinzu.

1
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.


0

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.