Senden Sie ein HTML-Formular ohne eine Schaltfläche zum Senden?

Lesezeit: 3 Minuten

Benutzeravatar von Frantisek
Frantisek

Kann ich eine html <form> mit <div> Anstatt von <input type="submit"> ?

So was:

<form method="post" action="" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div>Submit the form by clicking this</div>

Benutzeravatar von japrescott
japrescott

Die Methode, die Sie zum Senden eines bestimmten Formulars verwenden können, ist die folgende:

// Grab the form element and manually trigger the 'submit' method on it:
document.getElementById("myForm").submit();

In Ihrem Beispiel können Sie also jedem beliebigen Element einen Click-Event-Handler hinzufügen und dadurch die Submit-Methode des Formulars auslösen:

<form method="post" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div class="submit">Submit the form by clicking this</div>
const myForm = document.getElementById("myForm");
document.querySelector(".submit").addEventListener("click", function(){

  myForm.submit();

});

Und wenn Sie es im jQuery-Stil tun möchten (was Ich empfehle nicht für eine so einfache Aufgabe);

$("#myForm").submit();

In seiner vollen Form:

const myForm = $("#myForm");
$(".submit").click(function(){

  myForm.submit();

});

Verweise:

  • warum benutzt heutzutage jeder für die einfachsten aufgaben jquery? jQuery fügt dieser Lösung etwa 500 CPU-Anweisungen hinzu. Wenn Sie etwas Einfaches tun können, warum tun Sie es nicht einfach?

    – japrescott

    9. Oktober 2011 um 16:55 Uhr

  • @japrescott Das submit Methode in jQuery ist nicht sehr teuer. Es ruft im Grunde nur die native Javascript-Funktion auf. Ich bin mir nicht sicher, warum Sie in diesem Fall so darauf bestehen, jQuery nicht zu verwenden.

    – Peter Olsen

    9. Oktober 2011 um 16:59 Uhr


  • @japrescott, weil das OP seine Frage mit jQuery getaggt hat!

    – Funkelnd

    9. Oktober 2011 um 17:07 Uhr

  • Ich würde sagen, der jQuery-Weg ist ein wenig sauberer, aber NICHT einfacher. Sie sind beide Einzeiler. jQuery wäre für diese Aufgabe zu viel des Guten. 🙂

    – b01

    16. April 2013 um 21:55 Uhr


  • Die dumme Diskussion von JQuery v JS ist irrelevant, wenn die Frage nach jquery fragt. Und Leute, die alle möglichen Aussagen über JS besser machen, sind absolut fanatisch. Auf lange Sicht kommt es darauf an, was der Kunde bekommt, NICHT wie es gemacht wird. Ich habe gesehen, wie völlig beschissener Code in erstklassigen AAA-Spielen veröffentlicht und erstaunlicher optimierter Code weggeworfen wurde. Vergiss die Leute der Silent-Evangelisation – ihre Ergebnisse und Lösungen, die zählen. Nicht, was du diese Woche am liebsten magst.

    – David Lannan

    15. Dezember 2018 um 6:27 Uhr

Ja, es ist ziemlich einfach. Verwenden Sie einfach die submit[jQuery docs] Methode innerhalb von a click Handler-Funktion.

$("#myDiv").click(function() {
 $("#myForm").submit();
});

Wenn Sie es vorziehen, können Sie es mit Vanilla Javascript tun:

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};

Binden Sie das div-Click-Ereignis.

$("div").click(function(){ $("form#myForm").submit(); });

$('#myDiv').click(function() {  
    $('#myForm').submit();
});

Verwendung von jquery:

$('#myForm').submit();

Benutzeravatar von Quentin
QUentin

Wenn Sie sich unnötig auf JavaScript verlassen wollen, dann könnten Sie…

jQuery('div').click(function () { jQuery('form').submit(); });

… jedoch sollten Sie semantisches HTML verwenden, das ohne die Anwesenheit von JS funktioniert. Verwenden Sie also einen echten Senden-Button und wenden Sie CSS an, damit es so aussieht, wie Sie es möchten.

vzwicks Benutzeravatar
vzwick

Für eine bessere Semantik und elegante Degradation schlage ich vor, dass Sie Folgendes tun:

$(document).ready(function(){
    $('form input[type="submit"]').replaceWith('<div class="submit">Submit the form by clicking this</div>'); // replace submit button with div

    $('.submit').live('click', function() {  
        $(this).closest('form').submit();
    });
});

Auf diese Weise bleibt Ihr Formular für Kunden ohne JS nutzbar.

Abgesehen davon: Gestalten Sie Ihre Eingabe einfach so, dass sie mit CSS so aussieht, wie Sie es möchten 😉

  • Ziemlich einfaches JQuery-Plugin: jsfiddle.net/yckart/3b4yzj8h Wir könnten es optimieren, indem wir über jede Submit-Eingabe iterieren, um jede durch eine einzelne zu ersetzen.

    – yckart

    28. März 2015 um 1:32 Uhr


1429780cookie-checkSenden Sie ein HTML-Formular ohne eine Schaltfläche zum Senden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy