Submit an HTML form without having a submit button?

Question

Can I submit a html <form> with <div> instead of <input type="submit"> ?

Like this:

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

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

Answer 1

The method you can use to submit a specific form is the following:

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

So in your example, you can add a click event handler on any element you like and trigger the form's submit method through that:

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

});

And if you want to do it jQuery style (which I do not recommend for such a simple task);

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

In its full form:

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

  myForm.submit();

});

---

References:

• The submit() method of HTML Form elements (native JavaScript API)
• The jQuery submit() API