Devyani Kotadiya Devyani Kotadiya - 1 month ago 8
PHP Question

handle div tag visibility in php using javascript after submitting button

In this code when I select option 3 value my business div will be visible(For option 1 and 2 value it will be hidden) but after submitting button the business div not visible.so, please help me to solve it.

HTML code

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"

<table width="30%" border="1px solid white"><tr border="1px solid white">
<td><select id='purpose' name="purpose" style="color:black">

<option value="1" <?php echo $d1 ?>>Current Day</option>
<option value="2" <?php echo $d2 ?>>Current Month</option>
<option value="3" <?php echo $d3 ?>>Custom</option>
</select></td></tr></table></br>
<div style='display:none;' id='business'>

<table width="50%"><tr> <td width="50%">Start Date<input style="color:black;background-color:white;" type="text" id="basic_example_1" name="stdt" placeholder="YYYY-MM-DD HH:MM"/>


</td>
<td >End Date<input style="color:black;background-color:white;" type="text" id="basic_example_3" name="spdt" placeholder="YYYY-MM-DD HH:MM"/>

</td></tr></table>
</div>

<button type="submit" name="table" value="reg" class="btn btn-success" style="width:20%;height:35px;margin-top:5px" >Submit</button>

</form>


Javascript code

<script>

$(document).ready(function(){

$('#purpose').on('change', function() {
if ( this.value == '3')
{
$("#business").show();


}
else if(this.value == '2')
{
$("#business").hide();
}
else if(this.value == '1')
{
$("#business").hide();

}
});


});


</script>

vel vel
Answer Source

Try this code.

 <?php
        $DispDiv ="display:none;";

        if(isset($_GET['purpose']) && ($_GET['purpose'] == 3)){
            $DispDiv ="display:block;";         
        }

    ?>

        <form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>" <table width="30%" border="1px solid white">
            <tr border="1px solid white">
                <td>
                    <select id='purpose' name="purpose" style="color:black">

                        <option value="1" <?php echo $d1 ?>>Current Day</option>
                        <option value="2" <?php echo $d2 ?>>Current Month</option>
                        <option value="3" <?php echo $d3 ?>>Custom</option>
                    </select>
                </td>
            </tr>
            </table>
            </br>

            <div style='<?php echo $DispDiv;?>' id='business'>

                <table width="50%">
                    <tr>
                        <td width="50%">Start Date
                            <input style="color:black;background-color:white;" type="text" id="basic_example_1" name="stdt" placeholder="YYYY-MM-DD HH:MM" />

                        </td>
                        <td>End Date
                            <input style="color:black;background-color:white;" type="text" id="basic_example_3" name="spdt" placeholder="YYYY-MM-DD HH:MM" />

                        </td>
                    </tr>
                </table>
            </div>

            <button type="submit" name="table" value="reg" class="btn btn-success" style="width:20%;height:35px;margin-top:5px">Submit</button>

        </form>
        <script>
            jQuery(document).ready(function($) {

                $('#purpose').on('change', function() {
                    if (this.value == '3') {
                        $("#business").show();

                    } else if (this.value == '2') {
                        $("#business").hide();
                    } else if (this.value == '1') {
                        $("#business").hide();

                    }
                });

            });
        </script>