<Lesson 16> [Contents] <Lesson 18>
In the previous lessons, we have learned how to write code for the onClick, onChange and onSelect event handlers in JavaScript. In this lesson, we shall learn how to write code for the onmouseover and the onsubmit event handlers.
17.1 The onmouseover Event
The onMouseover event occurs when the user drags the mouse over certain elements of a web page, such as a hyperlink. In the following example, when the user drags the mouse over the hyperlink, a popup dialog will appear prompting he or she to click the OK button. After clicking the OK button, the user will be directed to the particular web page.
Example 17.1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example 17.1: JavaScript event-onMouseover</title>
</head>
<body>
<script>
function mylink()
{alert("Taking you to the webpage now");
location.href="http://javascript-tutor.net/";
}
</script>
<a href="mypage" onmouseover="mylink()">Click here to visit my webpage</a>
</body>
</HTML>
Click on Example 17.1 to view the output
17.2 The onsubmit Event
The onSubmit event is used to control the form submission process. It is usually used together with a Submit button on the web page. For example, you might want to remind that the user leaves a textbox empty or mistype something. You can write code to customize whatever you need to alert the user. For example, you can include the following code within the form tag to alert the user to enter his or her email address before the form is submitted:
<Form name=”yourform”></form>
A fully coded example is shown below. In this example, if the user forget to enter his or her name, a dialog will pop up to remind the user to fill up his or her name. Once the user has enter his or her name and press the submit button, a message will appear to tell the user that the submission is successful.
Example 17.2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Example 17.2: JavaScript event-onsubmit</title>
</head>
<body>
<script>
function checkname(form)
{
if (form.customer_name.value=="")
alert("your have not fill up your name");
else
document.write("Your name is sucessfully submitted");
}
</script>
<Form>
Name: <input" value="">
<input>
</Form>
</body>
</html>
Click on Example 17.2 to check it out.