Home » JavaScript » JavaScript Submit Form Example

About Era Balliu

Era Balliu
Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.

JavaScript Submit Form Example

Submit forms are everywhere these days, and usually done with jQuery. This time we’ll teach you how to build them using JavaScript’s submit() function, which keeps form identity, be it class, id, tag, or name.

Setting it up
First of all we create three files: an HTML file, a JavaScript file and a CSS file with these names: index.html, submit_javascipt.js and submit_javascript.css.

JavaScript Interview Coming Up?

Subscribe to our newsletter and download the Ultimate JavaScript interview questions and answers collection right now!

In order to get you prepared for your next JavaScript interview, we have compiled a huge list of relevant questions and their respective answers. Besides studying them online you may download the eBook in PDF format!

 

The first will be the main document of our project, and the others will be the JavaScript file and the CSS file of it. But we’ll still have to script these two files into the index.html, and also we have to give a title to our project. After doing that our <head> tag will look like this:

<head>
    <title>Javascript Form Submit Example</title>
    <!-- Include CSS File Here -->
    <link rel="stylesheet" href="submit_javascript.css"/>
    <!-- Include JS File Here -->
    <script src="submit_javascript.js"></script>
</head>

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

Creating and styling the outline of your form

Now in the body section you put two <div>s inside of one another, one with the class="container" attribute and the one inside it with the class="main" attribute. These are purely for styling purposes. The code will look like this:

<div class="container">
    <div class="main">
    </div>
</div>

While the styling for these elements can be found in the submit_javascript.css file, looking like this:

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;
}

Labels and Inputs

Now inside of the <div class="main"> we put this code:

<form action="#" method="post" name="form_name" id="form_id" class="form_class" ></form>

And inside this tag we put the code for the labels and inputs, which should look like this:

<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" />

The inputs should both have the type="text" attribute, while having names and id respectively "name" and "email". Also we can put the attribute placeholder, though it’s not obligatory.

Buttons

Now it’s time to create the submit buttons, which will be four, as we want to make make the submission once by id, once by class, once by name and once by tag.Here’s the code:

<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()"/>

You all know the attributes given to the button, except for maybe the onclick attribute. That is the name of the JavaScript function, which tells the button what to do when clicked. With that we finish our job in the index.html file, so we can deal with those functions right now.

JavaScript functions

Every button triggers a different way of behaving for the buttons they’re attributed to, namely the submit the form by class, id, name, or tag. Also we will put out an alert which will tell us if the e-mail is valid or not. For that we’re going to have a validation function, which will look like this:

// 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;
    }
}

This function gets the name and e-mail and if those are null strings puts out “Please fill all fields……!!!!!!” or if the e-mail does not match the regular email, puts out “Invalid email…..!!!!!!”.

Let’s see first the function submit_by_tag(). The code for it will go like this:

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>\n\n Form Submitted Successfully......");
    }
}

After getting the name and email values and passing them through validation, the function gets the element by tag name and submits them using the submit() function. After that, it puts out an alert saying the name and email entered, the form tag, and a message saying that the form was submitted successfully.

Similar is what we’re going to do with the other three functions, except in them we’re going to get the elements by class, id, or name.

The code below is the submit_by_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") + "\n\n Form Submitted Successfully......");
    }
}

This is the code for submit_by_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") + "\n\n Form Submitted Successfully......");
    }
}

And finally, this is the submit_by_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") + "\n\n Form Submitted Successfully......");
    }
}

Styling the form

And last but not least is styling the form. We have already styled the outer <div>s with the class="container" and class="main" attributes. Now we’re going to make everything else look as pretty.

First we put this code in the submit_javascript.css file to style the title of the form and the content separator:

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;
}

Now we style the inputs and labels with this CSS bit of code:

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;
}

Now let’s get to the buttons.We will style them differently when in standby and when hovered. The following bit of code is their normal standby state:

#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;
}

Meanwhile the code for the buttons when hovered is this:

#btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{
    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

And with this we’re set. The form will look like this:

Form Submit

Form Submit

Download the source code

This was an example of form submission using JavaScript.

Download
You can download the source code for this example here: SubmitForm

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

One comment

  1. Thiswas a good experience .Was working on adding a Form ( ) but was not getting the required results So this was goodl experience forhaving this site come online

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook