Javascript Submit Form: Creating your Own Forms

You must have filled out dozens of forms online over the years to create accounts for email and social networking services. Have you ever wondered what happens when you hit the submit button? As soon as you click on submit, the data in your form is checked once by JavaScript code for errors. If it is error free, the data is sent on to the server that is hosting the webpage you’re currently on and the registration process becomes successful. JavaScript code is working behind the scenes to check your form for errors and also to accept the data you have input.

In this tutorial you’re going to learn how you can submit a form in JavaScript with the submit() method and to check your form for errors in the form. We’re going to assume you’re familiar with Javascript and how the basics of the language work. If not, we recommend you first try out a beginners Javascript  course.

The following lines of code will create a three line form with three empty text boxes where you can input data.

The following lines of code will create a three line form with three empty text boxes where you can input data.

<form>
First name: <input type="text" name="firstname"><br>
Middle name: <input type="text" name="middlename"><br>
Last name: <input type="text" name="lastname">
</form>

Similarly, you can add any other entries to the form you like, like names, addresses, email ids and phone numbers.

The Submit Method

The syntax for the submit () method is:

document.forms[“nameofform”].submit();

The method must be called from within a function in your html program. You also need to assign an id to the form before the browser can recognize it. You can do this by assigning an ID attribute from within the form tab:

<form id='nameofform' action='formmail.pl'>

The submit() method can be called when a user clicks on a hyperlink, which is the most common, or an image. Let’s take a look at the code for both these scenarios:

Submitting a Form by Clicking on the Hyperlink

You can use the following code to submit a form when a hyperlink is clicked:

<script type="text/javascript">
function submitform()
{
document.forms["nameofform"].submit();
}
</script>
<form id="nameofform" action="submit-form.php">
Search: <input type='text' name='query'>
<a href="javascript: submitform()">Submit</a>
</form>

The above code will bring up a form with a single field called “Query” and a blank text box next to it. There will also be a submit hyperlink button which you can click to submit the data you enter in the blank text box.

Instead of a Hyperlink, you can use a clickable submit button (this is what most users are used to). To make a clickable submit button, remove the code that inserts the hyperlink “Submit” and replace it with the submit button:

<input type="submit" name="submitbutton" value="Submit" />

Here, the name is the identification tag that will be assigned to the submit button. The value field is the name that you want to appear on your button. You can make your “submit” button a go button by changing the value to “go”.

If you want the submit button to accept the data from your form, you can use the following line of code:

<form name="nameofform" action="html_form_action.asp" method="get">
First Name: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

This will allow the browser to fetch the data you have entered in the “first name” field in your form.

Submitting a Form by Clicking on the Form Submit Button

You can also use an image to accept the submission of data. You need to have an image you can use with you first. You will need to define the attributes of the image (height and width) before you can use it as the submit button.

The code to make an image the submit button is as follows:

<form name="nameofform" action="submit-form.ph">
Query: <input type='text' name='query'/>
<input type="image" src="image.gif"/>
</form>

Here, the “image.gif” will be the name of the image that will be present on the system. You can modify the attributes of the images with the following line of code:

<img src="image.gif" width="30" height="20" border="0" />

You may need to play around with the attributes a little before the image looks small enough to be a submit button.

Validating your Form before Submission

Now that you know how to submit a basic form with the submit() method, how do you make sure that the data the user is submitting doesn’t have any mistakes in it? You can use JavaScript to check if any fields in the form are empty, if the email id entered is valid, if the user has input text in place of numbers and if the date entered is valid.

You can check if the form you’re submitting doesn’t have any empty spaces with the following code:

function validateForm()
{
var x=document.forms["nameofform"]["name"].value;
if (x==null || x=="")
 {
 alert("The First Name field cannot be left blank");
 return false;
 }
}

Here, JavaScript will check the “name” filed within the form to see if the user has entered any data into it. If it has been left empty, it will throw up an alert to notify the user. You can include several fields that have to be checked instead of a single field.

You can check if the form you’re submitting has a valid email address entered with the following line of code:

function validateForm()
{
var x=document.forms["nameofform"]["emailid"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
 alert("Enter a Valid Email Address");
 return false;
 }
}

Here, Javascript will check to see if there is a “@” character in the email id, a “.” character, and that the “@” character isn’t the beginning of the email address.  Also, it will ensure that the “.” appears after the “@” and that it’s not one of the final two letters of the email address.

If you wanted to validate the phone number a user is entering on the form, use the following code:

function phonenumber(inputtxt)  
{  
 var pno = /^\d{10}$/;  
if((inputtxt.value.match(pno))  
 {  
return true;  
}  
else  
  {  
  alert("Please Recheck your phone number");  
   return false;  
     }  
}

You will need some practice before you manage to write a form that’s error free and works just how you want. Be sure to get plenty of practise. If you get stuck, you can always go look up our intermediate  Javascript course or try coding your form directly in php.