JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 18: onsubmit event


In this lesson, we shall learn more about the onsubmit event handler in JavaScript. The onsubmit event handler is used to handle form submitting process. The following example demonstrates how we can design JavaScript code to send email.

18.1 Using the onsubmit event handler to send email

We can write JavaScript code for the onsubmit event handler to send an email to the address specified by the user. Here we are using the mailto method to open the default email program such as Microsoft Outlook to send an email. However, this mailto method apparently works only with IE and Firefox but not working very well in Google’s Chrome.

Example 18.1: Code for Sending Email


<script>

function sendMail(form){
emailAdd=mailform.emailbox.value;
location="mailto:"+ emailAdd;}

</script>
<form name="mailform"  onsubmit="sendMail()">
email address:<input name="emailbox" type="text" value="">
<input type="submit" value="Send email">
</form>

Click Example 18.1 to try it out.

You can modified the above program by alerting the user who leaves the email box blank to enter his or her email address into the box. The code is shown below:

Example 18.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>JavaScript Example 18.1: Send Email</title>
</head>
<body>
<script>

function sendMail(form){
var emailAdd
emailAdd=mailform.emailbox.value;
if (mailform.emailbox.value=="")
alert("your have not filled up your email address");

else

location="mailto:"+ emailAdd;}

</script>
<form>
email address:<input value="">
<input value="Send email">
</form>
</body>

Click on Example 18.2 to view the output

18.2: Email Validation

We can improve on the previous examples by adding an email validation process. This is to check whether the user has entered a valid email address or not before it is submitted to the server. Here we use the indexOf property of the string object. The indexOf property comprises two parameters,searchValue and fromIndex. indexof(searchValue, fromIndex) means it searches the string for the first instance of the string searchValue. If fromIndex is included, it starts searching from that position within the string. It returns the value of the index of the first letter where the string is first found. If searcValue is not found, it returns a value of -1.

In example 18.2, we include the line  mailform.emailbox.value.indexOf('@',0)==-1 to validate email address as all email addresses consist the @ character. If @ is not found, it returns a value of -1; which means the email address entered is invalid. If nothing is entered, it is also considered an invalid email address. The operator || means the logical operator OR.

Example 18.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>JavaScript Example 18.1: Send Email</title>
</head>
<body>
<script>

function sendMail(form){
var emailAdd
emailAdd=mailform.emailbox.value;
if (mailform.emailbox.value==""|| mailform.emailbox.value.indexOf('@',0)==-1) //to search for the character @

alert("Please enter a valid email address");

else

location="mailto:"+ emailAdd;}

</script>
<form>
email address:<input value="">
<input value="Send email">
</form>
</body>

Please click on Example 18.3 to test the output.


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy