模态代码

    <form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add parts</h4>
      </div>
      <div class="modal-body">
      <input type="text" name="field1" placeholder="Part Name" id="pName" />
      <br>
      <br>
      <input type="text" name="field2" placeholder="Piece Code" />
      <br>
      <br>
      <input type="text" name="field3" placeholder="Piece Price" />
      <br>
      <br>

      <input type="text" name="field4" placeholder="Quatity" />
      <br>
      <br>
      <input type="text" name="field5" placeholder="Total" />
      <br>
      <br>
      <input type="text" name="field6" placeholder="Comments" />
      <br>
      <br>
      <input type="text" name="field7" placeholder="Shipped" />
      <br>
      <br>

      </div>
      <div class="modal-footer">
        <button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
    </div>
    </div>
    </div>
</div>

我想要完成的是获取在此弹出模式中输入的数据，通过按模式中的保存按钮将其保存在数据库中并清除弹出窗口，以便用户可以再次输入数据。我想通过使用PHP Query来保存数据。请建议我一种方法来完成它。我已经看过很多教程和几乎所有关于堆栈溢出的问题，但是我无法完成它。

Answer 1

你可以使用ajax来做到这一点;试试这个

联系页面

<div id="contact">
<h3>Contact Us For Any Query</h3>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>


<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>    
<script>

$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();

        var info = $("#form").serialize();  
        $.ajax({

            type: "POST",
            url: "add.php",
            data: info,
            success: function(result){

                //$("#form")[0].reset();
                  $('#notification').html(result); 

            }
        });

        e.preventDefault();

    });

});


</script>

<!--div for notification    -->
<div id="notification"></div>   



<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add parts</h4>
      </div>
      <div class="modal-body">
      <input type="text" name="field1" placeholder="Part Name" id="pName" />
      <br>
      <br>
      <input type="text" name="field2" placeholder="Piece Code" />
      <br>
      <br>
      <input type="text" name="field3" placeholder="Piece Price" />
      <br>
      <br>

      <input type="text" name="field4" placeholder="Quatity" />
      <br>
      <br>
      <input type="text" name="field5" placeholder="Total" />
      <br>
      <br>
      <input type="text" name="field6" placeholder="Comments" />
      <br>
      <br>
      <input type="text" name="field7" placeholder="Shipped" />
      <br>
      <br>

      </div>
      <div class="modal-footer">
        <button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
    </div>
    </div>
    </div>
</div>
</div>

用于添加数据的PHP页面add.php

<?php

    //connection to your database
    //remember to change the host, dbname, and password to yours, 
    $db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8', 
                  'root', 
                  '',
                  array(PDO::ATTR_EMULATE_PREPARES => false,
                  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


?>
<?php

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

    $field1 = $_POST['field1'];
    $field2 = $_POST['field2'];
    $field3 = $_POST['field3'];
    $field4 = $_POST['field4'];
    $field5 = $_POST['field5'];
    $field6 = $_POST['field6'];
    $field7 = $_POST['field7'];




    $stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
    VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
    $stmt->bindParam(':field1', $field1);
    $stmt->bindParam(':field2', $field2);
    $stmt->bindParam(':field3', $field3);
    $stmt->bindParam(':field4', $field4);
    $stmt->bindParam(':field5', $field5);
    $stmt->bindParam(':field6', $field6);
    $stmt->bindParam(':field7', $field7);

    $stmt->execute();

    echo 'added';

}

?>

希望我的回答对你有所帮助：

Answer 2

将表单保留在modal中，并将php文件（例如：test.php）作为操作。

以下是我建议您尝试的代码：

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>

 <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

       <form action="test.php" method="POST">
        <!-- Modal content-->
       </form>
    </div>
 </div>

编写test.php文件并使用$ _POST方法检索值。

获取以模态输入的数据以保存在数据库中

模态代码

2 个答案: