送信ボタンをクリックした後に隠しテーブルを表示

Question

私はプロジェクト名を選択してシート名を入力するフォームを持っています。 送信ボタンをクリックすると、最後に挿入されたレコードがテーブル形式で表示されますが、送信ボタンをクリックするとテーブルが表示されますが、ページの読み込みが終了するとすぐにテーブルが非表示になります。送信ボタンをクリックすると、テーブルが表示されます。どうすればこの問題を解決できますか？

<button type="submit" name="submit" id="button" class="btn-success btn">Submit</button> 

<script> 
    $(document).ready(function() { 
    $("#button").click(function() { 
     $("#table").show(); 
    }); 
    }); 
</script> 

<?php 
    include('controller.php'); 
    $s4 = "SELECT * FROM col_heading ORDER BY coln_id DESC LIMIT 1"; 
    $res = mysqli_query($bd, $s4); 
    while ($row = mysqli_fetch_array($res)) { 
?> 

<table class="table table-bordered" id="table" style="width:50%;"> 
    <thead> 
    <tr> 
     <th>Sr.no</th> 
     <th>Column Name</th> 
    </tr> 
    </thead> 
    <tbody> 

    <tr class="odd"> 
     <td>1</td> 
     <td id="h1:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h1']; ?> 
     </td>  
    </tr> 
    <tr> 
     <td>2</td> 
     <td id="h2:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h2']; ?> 
     </td> 
     </tr> 
    <tr class="odd"> 
     <td>3</td> 
     <td id="h3:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h3']; ?> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<?php 
} 
?> 

Answer 1

送信してください。e.preventDefault();を送信してください。

あなたがサブミット時に何かしたいのであれば、クリック機能の中でajaxコールを使い、それをうまく処理する方が良いでしょう。

update.phpを

<?php 
    include('controller.php'); 
    $s4 = "SELECT * FROM col_heading ORDER BY coln_id DESC LIMIT 1"; 
    $res = mysqli_query($bd, $s4); 
    while ($row = mysqli_fetch_array($res)) { 
?> 

が内側クリック機能からupdate.phpをするAJAX呼び出しを行い、新しいファイルであなたのphpを入れ

$(document).ready(function() { 
     $("#button").click(function(e) { 
     e.preventDefault(); 
     $("#table").show(); 
     $.ajax({ 
      url: 'update.php', 
      data: '<pass any data here>', 
      success: function(response){ 
      // do something with the resposne 
      } 
     }); 
     }); 
    }); 

完全なコード

<button type="submit" name="submit" id="button" class="btn-success btn">Submit</button> 

<script> 
    $(document).ready(function() { 
     $("#button").click(function(e) { 
     e.preventDefault(); 
     $("#table").show(); 
     $.ajax({ 
      url: 'update.php', 
      data: '<pass any data here>', 
      success: function(response){ 
      // do something with the resposne 
      } 
     }); 
     }); 
    }); 
</script> 


<table class="table table-bordered" id="table" style="width:50%;"> 
    <thead> 
    <tr> 
     <th>Sr.no</th> 
     <th>Column Name</th> 
    </tr> 
    </thead> 
    <tbody> 

    <tr class="odd"> 
     <td>1</td> 
     <td id="h1:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h1']; ?> 
     </td>  
    </tr> 
    <tr> 
     <td>2</td> 
     <td id="h2:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h2']; ?> 
     </td> 
     </tr> 
    <tr class="odd"> 
     <td>3</td> 
     <td id="h3:<?php echo $row['coln_id']; ?>" contenteditable="true"> 
     <?php echo $row['h3']; ?> 
     </td> 
    </tr> 
    </tbody> 
</table>