| |
|
Text box OnClick event to remove default data |
We can remove the default text from an input box by connecting it to OnClick event of the text box element. You must have seen this in many web sites where we are asked to enter our user id. Once we click inside the text box the default message vanishes. This is done by using OnClick event of the text box.
We will try this by adding the OnClick command embedded within the text box and then by calling a different function where we will keep the code to make the text box blank. This way we will try to learn how to integrate a function with the OnClick event of a text box.
Here is the demo of onclick event of text box
Here is the code.
<form name=form1 method=post action='test.php'>
<b>Type</b><input type=text name=type value=''Enter your user id '' onclick="document.form1.type.value ='''';">Enter User ID
<input type=submit value=Submit> </form>
We can integrate a function with the OnClick event of the text box. Here is the code
<html><head><title>(Type a title for your page here)</title>
<script type="text/javascript">
function make_blank()
{
document.form1.type.value ="";
}
</script>
</head>
<body >
<form name=form1 method=post action='test.php'>
<b>Type</b><input type=text name=type value='Enter your user id' onclick="make_blank();">Enter User ID
<input type=submit value=Submit> </form>
</body>
</html>
Keep a file test.php in same directory to receive data of the form
| |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
| JavaScript Tutorials |
| Popular Tutorials |
|
| Drop down list |
| Timer function |
| JavaScript Tutorials |
|
| String |
| Array |
| Date & Time |
| Form Validation |
| Event Handling |
| Math Functions |
| Loops & structure |
| JavaScript Forum |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
