ボタンを送信した後にjavascriptを使用してPHPでdivタグの可視性を処理する

Question

このコードでは、オプション3の値を選択するとビジネスディビジョンが表示されます（オプション1および2の値は非表示になります）。 .so、それを解決するのを助けてください。

HTMLコード

<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コード

<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

このコードを試してください。

<?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> 

Answer 2

フォームを送信すると、#purposeのchangeイベントは、それが隠されたでしょう、トリガーとあなたが書いたスクリプトに基づいて取得します。