Friday, 20 February 2015

How to set value of one textbox to another on checkbox checked ?

Permanent address is same as Current address on checkbox click Javascript code.

Html Code:

<form method="post" >

    <input type="text" name="currentaddress" id="currentaddress" placeholder="Current Address" /><br>

    <input type="checkbox" onClick="return address()" name="accept" id="accept"><label for="accept">Same As Above<label><br>

    <input type="text" name="permanentaddress" id="permanentaddress"  placeholder="Permanent Address" />

</form>


Javascipt code:

(Copy-paste the following code in head section of your html page)

function address()
    {
        var chk=document.getElementById("accept").checked;
        if(chk)
        {
        var a1=document.getElementById("currentaddress").value;
        //alert(""+a1);
        document.getElementById("permanentaddress").value=a1;
        document.getElementById("permanentaddress").disabled=true;
        }
        else
        {
            document.getElementById("permanentaddress").disabled=false;
        }
    }

Live Demo

How to write a Simple jquery Code

How to write a Simple  jquery Code ??

Html code:


<input type="text" id="testid"  class="testclass" name="testname" placeholder="Event call using id on textbox click" >

<input type="text" id="testid2"  class="testclass2" name="testname2" placeholder="Event call using class on textbox leave" >


first thing download the latest jquery library from

http://code.jquery.com/jquery-migrate-1.2.1.min.js

then save it with "jquery-migrate-1.2.1.min.js" in your js folder or your project location


Jquery Code:

$(document).ready(function(){    // jquery start
    $("#testid").click(function(){    // text box click event
        alert("You have clicked");    // message to be displayed
    })
 });

This is the basic format for jquery beginner. you can use class instead of textbox id


$(document).ready(function(){    // jquery start
    $(".testclass2").blur(function(){    // text box blur event
        alert("This is use of class selector");    // message to be displayed
    })
 });


$(document).ready(function(){    // jquery start

    $("input").blur(function(){    // text box blur event on particular textbox
       
    $(this).css("border", "1px solid red");
       
    });
 });

Live Demo