JavaScript Submit Form Onclick
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of JavaScript submit form onclick, now to submit form with the help of JavaScript we have to first create a form then we have to write some codes in JavaScript so that after clicking on button our form gets submitted.
So, below we are going to show you an example and let us see the example for better understanding.
Step By Step Guide On JavaScript Submit Form Onclick :-
First question arises here that why we need to create JSON object in JavaScript.
This is because to use array in our codes again we have to stringify the array.
So, without doing that we can create JSON object directly. Below we are going to show an example in which we understand how to create JSON object in JavaScript.
So, without wasting more time let us see the codes for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript submit form on click
</title>
</head>
<body>
<center>
<h1>
TalkersCode
</h1>
<h2>
JavaScript submit form on click
</h2>
<form id="form" action="#" method="post">
<label>
Enter your name here:
</label>
<br />
<input type="text" name="name" />
<br />
<label>Enter Your Email id here: </label>
<br />
<input type="email" name="email" />
<br />
<label>Enter Your Password here: </label>
<br />
<input type="password" name="password" />
<br /><br />
<button href="#" style="" onclick="formSubmission()">Submit Data</button>
</form>
<script>
function formSubmission () {
let result = document.getElementById("form");
result.submit();
}
</script>
</center>
</body>
</html>- As we here see that we today write only JavaScript codes in our example.
- In previous tutorials, we already many times create a full code example in which we first create an HTML form with its basic structure. Inside that structure, we use HTML, head, title, body, and script tags.
- Now, one thing to note here that JavaScript codes are always written under script tag. Whereas script tag is a paired tag. So, let us see the above codes given in script tag to see how to submit form using onclick with the help of JavaScript.
- Now, inside above example you see that we create a form there with the help of form tag. And inside this form we create some inputs like name, email, and password. And after this we create a button to submit form.
- Now, after creating a form we write some JavaScript codes inside the JavaScript codes we create a function that gets called when we click on the button, you can see the onclick function that we applied on button. And then when we click the button our function gets called. Inside this function we get the form by using getdocumentbyid and then submit the form using submit() function.
- After submission of form we can also alert data or can save the data into database. There is already some articles of us with help of which you can see how to save data into database using JavaScript, but this is remaining work. And we have done the concept of submit form using onclick in JavaScript.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we can understand how submit form by onclick using JavaScript.
I hope this tutorial on JavaScript submit form onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
