• jQuery Effects – Hide and Show

    With jQuery Effects – Hide and Show, We can hide/show HTML elements with the hide() and show() methods. I have created an example to show and hide message to notify the higher value among two values on Check button click event.

    jQuery Show/Hide Method Program

    jQuery Show/Hide Method Program

    Example:

    jQuery Show/Hide Effect Program Code

    1. First create the New PHP Project in Netbeans.
    1. Add the jQuery libraries. Also add this 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 to take two values in the textbox and a button to check higher values among them using below mentioned code.

    <body>
    <form name=”frmPractical03″ method=”post” action=””>
    <table border=”1″>

    <tr>
    <th colspan=”5″>Check Highest Number</th>
    </tr>

    <tr>
    <td>Enter Two Values :</td>
    <td>
    <input type=”text” name=”txtNum01″ id=”txtNum01″ value='<?php echo $no1; ?>’ />
    </td>
    <td>V/S</td>
    <td>
    <input type=”text” name=”txtNum02″ id=”txtNum02″ value='<?php echo $no2; ?>’ />
    </td>
    <td>
    <input type=”submit” name=”btnCheck” id=”btnCheck” value=”Check” />
    </td>
    </tr>

    <tr>
    <td>The Status :</td>
    <td>
    <input type=”text” name=”lblNum02″ id=”lblNum02″ value='<?php echo $msg1; ?>’ style=”color:red;” />
    </td>
    <td></td>
    <td>
    <input type=”text” name=”lblNum02″ id=”lblNum02″ value='<?php echo $msg2; ?>’ style=”color:red;” />
    </td>
    <td></td>
    </tr>

    </table>

    </form>
    </body>

    1. Add the PHP code to check which one is the highest value and stored output to message variable. Code mentioned below.

    <?php
    $no1 = “0”;
    $no2 = “0”;
    $msg1 = “”;
    $msg2 = “”;

    if(isset($_POST[‘btnCheck’])){
    $no1 = intval($_POST[‘txtNum01’]);
    $no2 = intval($_POST[‘txtNum02’]);

    if($no1 > $no2){
    $msg1 = “Highest Value!”;
    }
    else{
    $msg2 = “Highest Value!”;
    }
    }
    ?>

    1. Now add jQuery Code to show/hide message(textbox) on the basis of empty/filled($msg). Code mentioned below.

    <!–jQuery Code to show/hide label(Textbox)–>
    <script>
    $(document).ready(function(){

    if($(“#lblNum01”).val() == “”){
    $(“#lblNum01”).hide();
    }
    else{
    $(“#lblNum01”).show();
    }

    if($(“#lblNum02”).val() == “”){
    $(“#lblNum02”).hide();
    }
    else{
    $(“#lblNum02”).show();
    }
    });
    </script>

    1. Now save and run the program.
    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 *