Verwenden Sie einen normalen Link, um ein Formular zu senden

Ich möchte ein Formular einreichen. Aber ich gehe nicht die grundlegende Art und Weise, eine Eingabeschaltfläche mit Submit-Typ zu verwenden, sondern einen Link.

Das Bild unten zeigt warum. Ich verwende Bildlinks, um das Formular zu speichern / zu senden. Da ich ein Standard-CSS-Markup für Bildlinks habe, möchte ich keine Eingabeschaltflächen verwenden.

Ich habe versucht, onClick = "document.formName.submit ()" auf das a-Element anzuwenden, aber ich würde eine HTML-Methode bevorzugen.

Irgendwelche Ideen?

Zwei Wege. Erstellen Sie entweder eine Schaltfläche und gestalten Sie sie so, dass sie wie ein Link mit CSS aussieht, oder erstellen Sie einen Link und verwenden Sie ihn onclick="this.closest('form').submit();return false;".

Sie können dies nicht wirklich tun, ohne nach meinem besten Wissen Skripte zu erstellen.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Beispiel von hier .

Nur so zu stylen input type="submit"hat bei mir funktioniert:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="link-button" />

Getestet in Chrome, IE 7-9, Firefox

Sie verwenden Bilder zum Senden. Sie können also einfach eine type="image"Eingabe-Schaltfläche verwenden:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

verwenden:

<input type="image" src=".."/>

oder:

<button type="send"><img src=".."/> + any html code</button>

plus etwas CSS

Mit reinem HTML gibt es definitiv keine Lösung, um ein Formular mit einem link ( a) -Tag zu senden . Das Standard-HTML akzeptiert nur Schaltflächen oder Bilder. Wie einige andere Mitarbeiter gesagt haben, kann man das Erscheinungsbild eines Links mithilfe einer Schaltfläche simulieren, aber ich denke, das ist nicht der Zweck der Frage.

IMHO glaube ich, dass die vorgeschlagene und akzeptierte Lösung nicht funktioniert.

Ich habe es auf einem Formular getestet und der Browser hat den Verweis auf das Formular nicht gefunden.

Es ist also möglich, es mit einer einzelnen Zeile JavaScript unter Verwendung eines thisObjekts zu lösen , das auf das angeklickte Element verweist, bei dem es sich um einen untergeordneten Knoten des Formulars handelt, das gesendet werden muss. So this.parentNodeist der Formularknoten. Nachdem es nur submit()Methode in dieser Form aufgerufen hat. Es ist keine notwendige Recherche aus dem gesamten Dokument erforderlich, um die richtige Form zu finden.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Angenommen, ich gebe mit meinem eigenen Namen ein:

Ich habe das getAttribut form method verwendet, da es möglich ist, die richtigen Parameter in der URL auf der geladenen Seite nach dem Senden anzuzeigen.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Diese Lösung gilt natürlich für alle Tags, die das onclickEreignis oder ein ähnliches Ereignis akzeptieren .

thisist eine ausgezeichnete Wahl, um den Kontext zusammen mit einer eventVariablen (verfügbar in allen gängigen Browsern und ab IE9) wiederherzustellen, die direkt verwendet oder als Argument an eine Funktion übergeben werden kann.

Ersetzen Sie in diesem Fall die Zeile durch ein aTag durch die folgende Zeile. Verwenden Sie dazu die Eigenschaft target, die das Element angibt, das das Ereignis gestartet hat.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

Sie können OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()" verwenden.