Table of Contents
hide
Example : How to copy value from one html element to other empty html element [Check Box Copy] .
<!DOCTYPE html>
<html>
<head>
<title>Codershelpline Presents</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function check()
{
if(document.form1.chk1.checked===true)
{
document.form1.UrTxtUname19.value=document.form1.UrTxtUname1.value;
document.form1.UrPassPsd19.value=document.form1.UrPassPsd1.value;
document.form1.UrDateDob19.value=document.form1.UrDateDob1.value;
document.form1.UrCmbMcode19.value=document.form1.UrCmbMcode1.value;
document.form1.UrNumMob19.value=document.form1.UrNumMob1.value;
document.form1.UrEmail19.value=document.form1.UrEmail1.value;
if(document.getElementById("UrRdbGender2").checked===true)
{
document.getElementById("UrRdbGender29").checked=true;
}
if(document.getElementById("UrRdbGender3").checked===true)
{
ocument.getElementById("UrRdbGender39").checked=true;
}
if(document.getElementById("UrRdbGender4").checked===true)
{
document.getElementById("UrRdbGender49").checked=true;
}
if(document.getElementById("UrChkMatric2").checked===true)
{
document.getElementById("UrChkMatric29").checked=true;
}
if(document.getElementById("UrChkInter2").checked===true)
{
document.getElementById("UrChkInter29").checked=true;
}
document.form1.UrTxrAdd19.value=document.form1.UrTxrAdd1.value;
}
else if(document.form1.chk1.checked==false)
{
document.form1.UrTxtUname19.value="";
document.form1.UrPassPsd19.value="";
document.form1.UrDateDob19.value="";
document.form1.UrCmbMcode19.value="";
document.form1.UrNumMob19.value="";
document.form1.UrEmail19.value="";
if(document.getElementById("UrRdbGender29").checked===true)
{
document.getElementById("UrRdbGender29").checked=false;
}
if(document.getElementById("UrRdbGender39").checked===true)
{
document.getElementById("UrRdbGender39").checked=false;
}
if(document.getElementById("UrRdbGender49").checked===true)
{
document.getElementById("UrRdbGender49").checked=false;
}
if(document.getElementById("UrChkMatric29").checked===true)
{
document.getElementById("UrChkMatric29").checked=false;
}
if(document.getElementById("UrChkInter29").checked===true)
{
document.getElementById("UrChkInter29").checked=false;
}
document.form1.UrTxrAdd19.value="";
}
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td>User Name</td>
<td>:</td>
<td>
<input type="text" name="UrTxtUname1" id="UrTxtUname2"
placeholder="Enter User ID">
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input type="password" name="UrPassPsd1" id="UrPassPsd2"
placeholder="Enter Password">
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>:</td>
<td>
<input type="date" name="UrDateDob1" id="UrDateDob2" value="">
</td>
</tr>
<tr>
<td>Gender</td>
<td>: </td>
<td>
<input type="radio" name="UrRdbGender1" id="UrRdbGender2"
value="Male">Male
<input type="radio" name="UrRdbGender1" id="UrRdbGender3"
value="Female" >Female
<input type="radio" name="UrRdbGender1" id="UrRdbGender4"
value="Transgender">Transgender
</td>
</tr>
<tr>
<td>Mobile No. </td>
<td>:</td>
<td>
<select name="UrCmbMcode1" id="UrCmbMcode2">
<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="UrNumMob1" id="UrNumMob2"
placeholder="Enter 10 digit No.">
</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td>
<input type="Email" name="UrEmail1" id="UrEmail2" placeholder=
"[email protected]">
</td>
</tr>
<tr>
<td>Qualification</td>
<td>:</td>
<td>
<input type="checkbox" name="UrChkMatric1" id="UrChkMatric2"
value="Matric">Matric
<input type="checkbox" name="UrChkInter1" id="UrChkInter2"
value="Inter">Intermediate
</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>
<textarea name="UrTxrAdd1" id="UrTxrAdd2"></textarea>
</td>
</tr>
<br><br>
<tr>
<td>If Both are same</td>
<td>:</td>
<td>
<input type="checkbox" onclick="check()" name="chk1">
<td>
</tr>
<tr>
<td>User Name</td>
<td>:</td>
<td>
<input type="text" name="UrTxtUname19" id="UrTxtUname29"
placeholder="Enter User ID">
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input type="password" name="UrPassPsd19" id="UrPassPsd29"
placeholder="Enter Password">
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>:</td>
<td>
<input type="date" name="UrDateDob19" id="UrDateDob29" value="">
</td>
</tr>
<tr>
<td>Gender</td>
<td>: </td>
<td>
<input type="radio" name="UrRdbGender19" id="UrRdbGender29"
value="Male">Male
<input type="radio" name="UrRdbGender19" id="UrRdbGender39"
value="Female">Female
<input type="radio" name="UrRdbGender19" id="UrRdbGender49"
value="Transgender">Transgender
</td>
</tr>
<tr>
<td>Mobile No. </td>
<td>:</td>
<td>
<select name="UrCmbMcode19" id="UrCmbMcode29">
<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="UrNumMob19" id="UrNumMob29"
placeholder="Enter 10 digit No.">
</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td>
<input type="Email" name="UrEmail19" id="UrEmail29"
placeholder="Example @gmail.com">
</td>
</tr>
<tr>
<td>Qualification</td>
<td>:</td>
<td>
<input type="checkbox" name="UrChkMatric19"
id="UrChkMatric29" value="Matric">Matric
<input type="checkbox" name="UrChkInter19" id="UrChkInter29"
value="Inter">Intermediate
</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>
<textarea name="UrTxrAdd19" id="UrTxrAdd29"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
------------------------------- OR --------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function SelectAll()
{
if(document.form1.chk.checked===true)
{
document.form1.chk1.checked=true;
document.form1.chk2.checked=true;
document.form1.chk3.checked=true;
document.form1.chk4.checked=true;
document.form1.chk5.checked=true;
document.form1.chk6.checked=true;
document.form1.chk7.checked=true;
document.form1.chk8.checked=true;
document.form1.chk9.checked=true;
document.form1.chk10.checked=true;
}
else
{
document.form1.chk1.checked=false;
document.form1.chk2.checked=false;
document.form1.chk3.checked=false;
document.form1.chk4.checked=false;
document.form1.chk5.checked=false;
document.form1.chk6.checked=false;
document.form1.chk7.checked=false;
document.form1.chk8.checked=false;
document.form1.chk9.checked=false;
document.form1.chk10.checked=false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<center>
<fieldset style="width: 300px">
<table>
<tr>
<td><input type="checkbox" name="chk1">Non-Matric</td>
</tr>
<tr>
<td><input type="checkbox" name="chk2">Matric</td>
</tr>
<tr>
<td><input type="checkbox" name="chk3">Intermediate</td>
</tr>
<tr>
<td><input type="checkbox" name="chk4">Graduation</td>
</tr>
<tr>
<td><input type="checkbox" name="chk5">Post-Graduation</td>
</tr>
<tr>
<td><input type="checkbox" name="chk6">M-Phil</td>
</tr>
<tr>
<td><input type="checkbox" name="chk7">PhD</td>
</tr>
<tr>
<td><input type="checkbox" name="chk8">Doctor</td>
</tr>
<tr>
<td><input type="checkbox" name="chk9">Engineer</td>
</tr>
<tr>
<td><input type="checkbox" name="chk10">Scientist</td>
</tr>
</table>
</fieldset><br>
<input type="checkbox" name="chk" onclick="SelectAll()">Select All
</center>
</form>
</body>
</html>Example : How to Show/Hide Text Box by clicking on Check Box [Hide/Unhide Text Box].
<html>
<head>
<title>Hide & UnHide Text Box</title>
<script>
function ShowHide()
{
if(document.form1.chk1.checked===true)
{
document.getElementById("txt2").style.display='inline';
document.getElementById("txt2").focus();
document.getElementById("txt2").value="";
}
if(document.form1.chk1.checked===false)
{
document.getElementById("txt2").style.display='none';
}
}
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="chk1" id="chk2" onclick="ShowHide()">
<input type="text" name="txt1" id="txt2">
</form>
</body>
</html>Example : How to enable/disable Text Box by clicking on Check Box [Enable/Disable Text Box].
<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable Text Box</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function DisabledBox()
{
if(document.form1.chk2.checked===true)
{
document.getElementById("txt2").disabled= false;
document.getElementById("txt2").focus();
document.getElementById("txt2").value="";
}
if(document.form1.chk2.checked===false)
{
document.getElementById("txt2").disabled = true;
}
}
</script>
</head>
<body>
<div>
<form name="form1">
<input type="checkbox" id="chk2" onclick="DisabledBox();">
<input type="text" id="txt2" disabled="">
</form>
</div>
</body>
</html>Example : How to make a text box Read Only or remove it by clicking on Check Box [Read Only Text Box].
<!DOCTYPE html>
<html>
<head>
<title>Read Only/Not the Text Box</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function ReadAble()
{
if(document.form1.chk3.checked===true)
{
document.getElementById("txt3").readOnly= false;
document.getElementById("txt3").focus();
document.getElementById("txt3").value="";
}
if(document.form1.chk3.checked===false)
{
document.getElementById("txt3").readOnly = true;
}
}
</script>
</head>
<body>
<div>
<form name="form1">
<input type="checkbox" id="chk3" onclick="ReadAble();">
<input type="text" id="txt3" readonly="">
</form>
</div>
</body>
</html> 
0 Comments