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>

-------------------------------

<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 Read Only/Not the Text Box 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>

 189 total views,  1 views today


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.