在提交按钮后使用javascript处理php中的div标签可见性

Question

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>    

Answer 1

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>