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

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>

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:

• Das einreichen() Methode von HTML-Formularelementen (native JavaScript API)
• Das jQuery einreichen() API

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();

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.

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 😉