php - echo bootstrap modal on php中的点击功能并提交数据

Question

我正在尝试使用 php 来回显引导模式。我有来自表数据库的一些数据，如果我单击按钮并尝试在 If(isset) 条件下回显模态，则模态不会显示。 在这里查看我的代码:

 <?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";
 }

 ?>

我的模态 html 代码在这里。模态窗口未建立。

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

您的表单实际上已提交，因此您应该看到屏幕闪烁、模式显示，但页面已重新加载。

为了防止这种情况，您可以使用 jQuery 来阻止默认的表单提交操作，或者删除您的表单。

由于您已经为模式激活了 Bootstrap，我假设您也有 jQuery，请尝试将其添加到 php 脚本的末尾:

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

编辑1: 我制作了一个测试文件，它对我有用，这是我的文件中的内容:

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