• jQuery Textbox WaterMark

    Textbox WaterMark using jQuery in PHP

    I have created very simple example to eplain Textbox Watermark using jQuery in PHP program.

    jQuery Textbox Water Mark Source Code

    1. First create the New PHP Project in Netbeans.
    1. Download the jQuery libraries. Also add these libraries to your web page.

    <!–Include jQuery Library–>
    <script src=”js/jquery-1.11.3.min.js”></script>

    1. Now start to draw the design structure which supports the sum of two integer values of TextBox and displayed in third TextBox. Code written below.

    <body>
    <form name=”frmPractical02″ id=”frmPractical02″ method=”POST”>
    <table>
    <tr>
    <td>Enter First Value :</td>
    <td>
    <input type=”text” name=”txtFirst” id=”txtFirst” value=”<?php echo $first; ?>” />
    </td>
    </tr>
    <tr>
    <td>Enter Second Value :</td>
    <td>
    <input type=”text” name=”txtSecond” id=”txtSecond” value=”<?php echo $second; ?>” />
    </td>
    </tr>
    <tr>
    <td>The Answer is :</td>
    <td>
    <input type=”text” name=”txtAnswer” id=”txtAnswer” value=”<?php echo $ans; ?>” />
    </td>
    </tr>
    <tr>
    <td colspan=”2″>
    <input type=”submit” name=”btnSum” id=”btnSum” value=”Sum” />
    </td>
    </tr>
    </table>
    </form>
    </body>

    Set both the properties “id” and “name” of all controls because PHP recognize controls using “name” property and jQuery using “id”.

    1. Add PHP code to sum the two values of textboxes.

    <?php
    $first = “”;
    $second = “”;
    $ans = “”;

    if(isset($_POST[‘btnSum’]))
    {
    $first = intval($_POST[‘txtFirst’]);
    $second = intval($_POST[‘txtSecond’]);
    $ans = $first + $second;
    }
    ?>

    1. Now create a style-sheet to support watermarking colour.

    <!–Internal Stylesheet for Watermark–>
    <script>
    .LightColor{
    color:#9B9B9B;
    }
    </script>

    1. Add the jQuery code to watermark all three textboxes.

    <!–jQuery Code to Watermark the TextBox–>
    <script>
    $(document).ready(function(){
    //Set Default Value as Watermark
    if($(“:text”).val() == “”){
    $(“:text”).addClass(“LightColor”).val(“0”);
    }

    //Now Remove Watermark when textbox got focus
    $(“:text”).focus(function(){
    if($(this).val() == “0”){
    $(this).removeClass(“LightColor”).val(“”);
    }
    });

    //Now Add Default Watermark if textbox is blank and lost focus
    $(“:text”).blur(function(){
    if($(this).val() == “”){
    $(this).addClass(“LightColor”).val(“0”);
    }
    });
    });
    </script>

    1. Save “Index.php” file and run to see the watermarking effect on TextBox controls.
    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

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