Table of Contents
hide
Example : Text Box codes in JS To Show/Hide Asterisk/Star Symbol When Text Box is Blank/Filled.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
<script>
function starhide()
{
document.getElementById("lbl2").style.display = 'none';
}
function starshow()
{
document.getElementById("lbl2").style.display = 'inline';
}
</script>
</head>
<body>
<form name="form1">
<div>
<label>Name</label>
<label style="color: red" hidden="">*</label>
<label style="color: red" hidden="" id="lbl2">**</label>
<label>:</label>
<label><input type="text" name="input1"></label>
</div>
<input type="button" onClick="starhide()" value="Hide">
<input type="button" onClick="starshow()" value="Show">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script>
function enter1()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.u_id.focus();
}
}
function enter2()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.psd.focus();
}
}
function enter3()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.dob.focus();
}
}
function enter4()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.gender1.focus();
}
}
function enter5()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.gender2.focus();
}
}
function enter6()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.gender3.focus();
}
}
function enter7()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.mcode.focus();
}
}
function enter8()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.mob.focus();
}
}
function enter9()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.email.focus();
}
}
function enter10()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.matric.focus();
}
}
function enter11()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.add.focus();
}
}
function enter12()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.pin.focus();
}
}
function enter13()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.state.focus();
}
}
function enter14()
{
var x = event.keyCode || event.which;
if (x === 13)
{
event.preventDefault();
document.form1.sub6.focus();
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="#">
<center>
<fieldset style="width: 60%; background-color: aliceblue;border-radius: 8px; border-
width: 4px; border-color: cadetblue">
<table style="font-weight: bold; font-family: cambria"> <h1>User
Registration</h1> <hr style="width: 95%">
<tr>
<td>Sl. No.</td>
<td>:</td>
<td>
<input type="text" name="sl_no" id="sl_no1" onkeypress="enter1()"
autofocus="">
</td>
</tr>
<tr>
<td>User Name</td>
<td>:</td> <td>
<input type="text" name="u_id" id="u_id1" onkeypress="enter2()"
placeholder="Enter User ID">
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input type="password" name="psd" id="psd1" onkeypress="enter3()"
placeholder="Enter Password">
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>:</td>
<td>
<input type="date" name="dob" id="dob1" onkeypress="enter4()">
</td>
</tr>
<tr>
<td>Gender</td>
<td>: </td>
<td>
<input type="radio" name="gender" id="gender1" onkeypress="enter5()"
value="Male" >Male
<input type="radio" name="gender" id="gender2" onkeypress="enter6()"
value="Female" >Female
</td>
</tr>
<tr>
<td>Mobile No. </td>
<td>:</td>
<td>
<select onkeypress="enter8()" name="mcode" id="mcode1">
<option value="+91">+91</option> <option value="+92">+92</option>
<option value="+93">+93</option> <option value="+94">+94</option>
</select>
<input type="number" name="mob" id="mob1" onkeypress="enter9()"
placeholder="Enter 10 digit No.">
</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td>
<input type="Email" name="email" id="email1" onkeypress="enter10()"
placeholder="[email protected]">
</td>
</tr>
<tr>
<td>Qualification</td>
<td>:</td>
<td>
<input type="checkbox" name="matric" id="check1"
onkeypress="enter11()" value="Matric" >Matric
</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>
<textarea style="width: 200px; text-transform:capitalize"
onkeypress="enter12()" name="add" id="add1">
</textarea>
</td>
</tr>
<tr>
<td>Pin No.</td>
<td>:</td>
<td>
<input type="number" name="pin" id="pin1" onkeypress="enter13()"
placeholder="Enter 6 Digit pin">
</td>
</tr>
<tr>
<td>State</td>
<td>:</td>
<td>
<select name="state" id="state1" onkeypress="enter14()">
<option value="--Select--">--Select--</option>
<option value="Bihar">Bihar</option>
<option value="Delhi">Delhi</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" onclick="astrick()" name="sub"id="sub6"
value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>Example : How to make a text box empty/blank in an html page on putting cursor in this box.
<!DOCTYPE html>
<html>
<body>
<input type="text" onfocus=" this.value='' " value="Write your contents here">
</body>
</html>
-------------------------------- OR -------------------------------
<!DOCTYPE html>
<html>
<body>
<input type="text" value="India" onfocus="if(this.value==='India')this.value='';">
</body>
</html><!DOCTYPE html>
<html>
<body>
<input type="text" value="India" id="txtid">
<input type="button" value="Cancel" onclick="document.getElementById('txtid').value = '' ">
</body>
</html>Example : How to make a text box empty/blank in an HTML page by clicking the same text box .
<!DOCTYPE html>
<html>
<body>
<input type="text" value="India" onclick="(this.value='')">
</body>
</html>Example : How to assign a default value in a text box of html page on loading the page using JavaScript.
<!DOCTYPE html>
<html>
<body>
<input type="text" value="India">
</body>
</html>
NB: Above code is through html method.
--------------------------------- OR -----------------------------------
<!DOCTYPE html>
<html>
<head>
<script>
function Default1()
{
document.getElementById("TxtSname2").value="India";
}
</script>
</head>
<body onload="Default1()">
<form name="form1" id="form2" action="#" method="post">
<center>
<fieldset style="width: 600px">
<legend>Create New Student Account</legend>
<table name="tab1" id="tab2">
<tr>
<td>Student Name</td>
<td>:</td>
<td><input type="text" name="TxtSname1" id="TxtSname2" ></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html> 
0 Comments