In javascript onclick event , you can use form.submit() method to submit form.
You can perform submit action by, submit button, by clicking on hyperlink, button and image tag etc. You can also perform javascript form submission by form attributes like id, name, class, tag name as well.
In our previous blogs we have explained various ways to submit form using jQuery. Here in this tutorial, we will explain you different ways to submit a form using Javascript. In which we will use JavaScript submit() function to create an object, which keeps form attribute to perform submit acction. An attribute can be id, class, name or tag.
Watch out the live demo or download the code to use it.
Now we will be going to see different ways of submitting form :
onclick form submit by id
For example,if the ID of your form is ‘form_id’, the JavaScript code for the submit call is
document.getElementById("form_id").submit();// Form submission
onclick form submit by class
For example,if the class of your form is ‘form_class’, the JavaScript code for the submit call is
var x = document.getElementsByClassName("form_class");
x[0].submit(); // Form submission
onclick form submit by name
For example,if the name of your form is ‘form_name’, the JavaScript code for the submit call is
var x = document.getElementsByName('form_name');
x[0].submit(); // Form submission
onclick form submit by tag name
For example,By the tag name’, the JavaScript code for the submit call is
var x = document.getElementsByTagName("form");
x[0].submit();// Form submission
Complete FormValidation and Form Submission Using Javascript
Our example, also contains a validation function to validate name and email fields.
// Name and Email validation Function.
function validation(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if( name ==='' || email ===''){
alert("Please fill all fields...!!!!!!");
return false;
}else if(!(email).match(emailReg)){
alert("Invalid Email...!!!!!!");
return false;
}else{
return true;
}
}
Our complete HTML and Javascript codes are given below.
HTML file: submit_javascript.html
Given below our complete HTML code.
<html>
<head>
<title>Javascript Form Submit Example</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/submit_javascript.css"/>
<!-- Include JS File Here -->
<script src="js/submit_javascript.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="#" method="post" name="form_name" id="form_id" class="form_class" >
<h2>Javascript Form Submit Example</h2>
<label>Name :</label>
<input type="text" name="name" id="name" placeholder="Name" />
<label>Email :</label>
<input type="text" name="email" id="email" placeholder="Valid Email" />
<input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"/>
<input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"/>
<input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"/>
<input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"/>
</form>
</div>
</div>
</body>
</html>
Javscript File: submit_javascript.js
Given below our complete Javascript code.
// Submit form with id function.
function submit_by_id() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
document.getElementById("form_id").submit(); //form submission
alert(" Name : " + name + " n Email : " + email + " n Form Id : " + document.getElementById("form_id").getAttribute("id") + "nn Form Submitted Successfully......");
}
}
// Submit form with name function.
function submit_by_name() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByName('form_name');
x[0].submit(); //form submission
alert(" Name : " + name + " n Email : " + email + " n Form Name : " + document.getElementById("form_id").getAttribute("name") + "nn Form Submitted Successfully......");
}
}
// Submit form with class function.
function submit_by_class() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByClassName("form_class");
x[0].submit(); //form submission
alert(" Name : " + name + " n Email : " + email + " n Form Class : " + document.getElementById("form_id").getAttribute("class") + "nn Form Submitted Successfully......");
}
}
// Submit form with HTML <form> tag function.
function submit_by_tag() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (validation()) // Calling validation function
{
var x = document.getElementsByTagName("form");
x[0].submit(); //form submission
alert(" Name : " + name + " n Email : " + email + " n Form Tag : <form>nn Form Submitted Successfully......");
}
}
// Name and Email validation Function.
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if (name === '' || email === '') {
alert("Please fill all fields...!!!!!!");
return false;
} else if (!(email).match(emailReg)) {
alert("Invalid Email...!!!!!!");
return false;
} else {
return true;
}
}
CSS File: submit_javascript.css
Styling HTML elements.
/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 10px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:60px;
}
input[type=text]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#btn_id,#btn_name,#btn_class,#btn_tag{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 47.5%;
border-radius: 5px;
margin-bottom:10px;
padding: 7px 0;
}
#btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
#btn_name,#btn_tag{
margin-left: 10px;
}
Conclusion:
This was all about different ways of form submission through JavaScript. Hope you have liked it, keep reading our other blogs posts, to know more coding tricks.
28 Replies to “Onclick JavaScript Form Submit”
send msg
The form submit code helped me much!!!.
i need to know how to place a comment box and to display the message written in a comnt box!!?
I want to know how to make this box?
How to do this?
Where is the email address of the site owner where the form
details will be sent to ?
How can i get input text of a single input box without submitting the whole form?
In the , where there is ( action = “#” ), you put ( ‘mailto:’ ), and your email.
An example:
method=”post” name=”form_name” class=”form_class”>
Hope this helped!
method=”post” name=”form_name”>
action= “mailto:[email protected]”
I want to know code of submit btn which convert form or table data in excel sheet and send it to my email id.
Return after form is submitted?
How do we send the submitter to a thank you page?
Deferenc to article author, some fantastic selective information.
Utterly indited content, Really enjoyed reading through.
You really make it appear really easy with your presentation but I find this matter to
be really something which I feel I might never understand.
It kind of feels too complex and very vast for me.
I’m having a look forward on your next post, I’ll attempt to get the grasp of it!
excellent put up, very informative. I wonder why the opposite experts of this sector do not understand this.
You must continue your writing. I am sure, you have a great readers’
base already!
Thanks for another informative site. The place else could I get that type of info written in such an ideal method?
I have a mission that I’m just now operating on, and I have been on the glance out for such
information.
The tricks enable you win the games. There are quite many
online casinos that ofrfer free soot units. Watch the
game of slots, free or definitely.
Have you ever thought about creating an ebook or guest authoring on other websites?
I have a blog centered on the same subjects you discuss and would
really like to have you share some stories/information. I
know my readers would appreciate your work. If you are even remotely interested,
feel free to shoot me an email.
He would spend a year in the famed La Masia, before becoming a potential first team player.
If some one wants expert view regarding running a blog after that
i suggest him/her to pay a quick visit this web site, Keep up
the pleasant work.
When someone writes an iece of writing he/she retains the idea oof a user in his/her
mind that how a user cann know it. So that’s why this piece of
writing is outstdanding. Thanks!
Awesome blog! Do you have any hints for aspiring writers?
I’m hoping to start my own blog soon but I’m a little lost on everything.
Would you propose starting with a free platform like WordPress or go
for a paid option? There are so many options out there that I’m totally overwhelmed ..
Any recommendations? Kudos!
email did receive
Hi there, its good paragraph concerning media print, we all
understand media is a enormous source of data.
Good info. Lucky me I recently found your blog by accident
(stumbleupon). I’ve saved it for later!
What’s up to every body, it’s my first go to see of this website; this web site includes remarkable and genuinely fine stuff
in support of visitors.
Having read this I believed it was rather informative.
I appreciate you finding the time and effort to put this article
together. I once again find myself spending a lot of time both reading and
posting comments. But so what, it was still worthwhile!
This web site certainly has all of the info I needed about this subject and didn’t know who
to ask.