在提交数据的php中单击函数的echo bootstrap模式

Question

I am trying to echo a bootstrap modal with php . I have some data from table database and if I click on button and try to echo modal on If(isset) condition, the modal is not showing. see my Code Here:

 <?php       
    //insert in persnaol user table


$sql = "SELECT id,date,status FROM $x order by id DESC;";
$result = $conn->query($sql);

  if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {



    echo "<div class='border'> ";
    echo "";
    echo "<form action='#' method='POST'>";
    $id = $row['id'];
    echo "<input type='show' name='statusid' value='$id' >";
    echo  "<p> " . $row["status"] ."</p><br>";


    echo "<a  class='pull-right' ><input type='submit' value='Edit Post' class='btn1' name='editbtn'  data-toggle='modal' data-target='#qModal' ></a>";
    echo  "<small> " . $row["date"]. "</small><br>";

$editid= $row['id'];



    echo "</form><br>";
    echo "</div>";  
echo "<br>";
 echo'
<script>
    $("form").submit(function(e){
        e.preventDefault();
    });
</script>'; 
} 

} else {
echo "hello";
 }

 ?>

and my modal html code is here. modal window is not established.

 <?php 
  require'db.php';

  if(isset($_POST['editbtn'])){

    $x = $_SESSION['username'];
    $id=$_POST["statusid"];  

     echo '<div class="modal fade" id="qModal" role="dialog" >';
    echo ' <div class="modal-dialog" style="z-index:1000;">';
    echo '<div class="modal-content">';
    echo '<div class="modal-header">';
    echo ' <button type="button" class="close" data-dismiss="modal">&times;</button>';
    echo '  <h4 class="modal-title">Post Editing.</h4>';
    echo ' </div>';
    echo ' <div class="modal-body">';
    echo '  <P>';
    echo $id;
    echo '</p>';
    echo ' <form>';
    echo '  <textarea value="" >hello</textarea>';
    echo ' </form>';
    echo '</div>';
    echo ' <div class="modal-footer">';
    echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
    echo ' </div>   </div>    </div> </div>';



  }


  ?>

Answer 1

Your form is actually submited so you should see the screen blinking, modal display but the page is reloaded.

To prevent this you can prevent the default form submit action with jQuery for example or remove your form.

As you have Bootstrap activated for your modal I assume you also have jQuery, try to add this at the end of your php script:

echo'
<script>
    $("form").submit(function(e){
        e.preventDefault();
    });
</script>';

EDIT1: I made a test file and It works for me, here is what's in my file:

<?php

    echo '
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>';

    $id=7;  

     echo '<div class="modal fade" id="qModal" role="dialog" >';
    echo ' <div class="modal-dialog" style="z-index:1000;">';
    echo '<div class="modal-content">';
    echo '<div class="modal-header">';
    echo ' <button type="button" class="close" data-dismiss="modal">&times;</button>';
    echo '  <h4 class="modal-title">Post Editing.</h4>';
    echo ' </div>';
    echo ' <div class="modal-body">';
    echo '  <P>';
    echo $id;
    echo '</p>';
    echo ' <form>';
    echo '  <textarea value="" >hello</textarea>';
    echo ' </form>';
    echo '</div>';
    echo ' <div class="modal-footer">';
    echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
    echo ' </div>   </div>    </div> </div>';
    echo "<div class='border'> ";
    echo "";
    echo "<form action='#' method='POST'>";
    $id = 2;
    echo "<input type='show' name='statusid' value='$id' >";
    echo  "<p> " . "here" ."</p><br>";

    //**edit button is here**

    echo "<a  class='pull-right' ><input type='submit' value='Edit Post' class='btn1' name='editbtn'  data-toggle='modal' data-target='#qModal' ></a>";
    echo  "<small> " . "date". "</small><br>";
    $editid= 2;
    echo "</form><br>";
    echo "</div>";  
    echo "<br>";

    echo'
    <script>
        $("form").submit(function(e){
            e.preventDefault();
        });
    </script>';