There are several ways to submit a form. Generally, we are used to submit a form using a submit button. However, sometimes we have to submit a form using a specific event or by clicking an HTML element.
There are several ways to submit a form using JavaScript. Even more, we can also submit a form on some event on the webpage.
Here we are going to learn to submit a form without the submit button.
Submit a Form Using JavaScript
The most simple way to submit a form without the submit button is to trigger the submit event of a form using JavaScript.
In the below example we are going to create a function to submit a form. We will set that function at onclick event of a div tag.
<!DOCTYPE html>
<html>
<head>
<title>Submit a form using JavaScript onclick event</title>
</head>
<body>
<form id="my_form" action="" method="POST">
<input type="text" name="name" placeholder="Enter Your Name"/>
<br/>
<input type="email" name="email" placeholder="Enter Your E-mail"/>
<br/>
<textarea placeholder="Enter Your Message" name="message"></textarea>
<br/>
<div onclick="submit_form()">Click Me To Submit</div>
</form>
<script>
function submit_form(){
var form = document.getElementById("my_form");
form.submit();
alert("Your Message Sent");
}
</script>
</body>
</html>Read Also: OnClick Form Validation Using jQuery
Conclusion
Here we submitted the form using a JavaScript function onclick event of div element. We can also set many other types of events to submit a form. I hope now you understand how to submit a form using JavaScript event without a submit button.
Enjoy Scripting 🙂
