回声bootstarap模态点击功能在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

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

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

正如你所引导激活你的语气我想你也有jQuery的，试着在你的PHP脚本的末尾补充一点：

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

EDIT1： 我做了一个测试文件，并将其作品对我来说，这里是什么在我的文件：

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