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

Question

我是Web开发的菜鸟，所以我坚持从模式获取数据并将其保存到数据库。 我用引导程序制作了模型。 下面是模态代码

---

模态代码

    <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

将表单保持在模态内部，并提供一个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方法检索值。