使用jQuery模式彈出窗口提交表單

Question

當我單擊該按鈕時，它會打開一個模式彈出窗口。

所以我想做的是在模式彈出窗口中，我想用一個字段輸入數字來插入表格..當他們單擊提交時，我想將這些值存儲在數據庫中

這是我的按鈕代碼：

<button type="button" class="btn btn-success"style="float:right; margin:3px 0px 3px 3px" id="btnShow">No Of Users</button>

這是我的模態模擬代碼：

<script type="text/javascript">
$(function () {
$("#btnShow").click(function(){
$('#demoModal').modal('show');
});
});

<div style="text-align:center; margin-top:10%"></div>

 <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Popup</h4>
        </div>
        <div class="modal-body">Hi, Welcome to Aspdotnet-Suresh.com</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

誰能幫我怎么做

提前致謝..

Answer 1

例如，首先，您必須在index.php文件中創建模式彈出窗口和ajax腳本。

-模式彈出式表單代碼-

 <div style="text-align:center; margin-top:10%"></div>

 <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Popup</h4>
    </div>
    <div class="modal-body">

     <form method="post">
       <input type="text" name="name1" id="name1" placeholder="name">
       <br>
       <input type="text" name="age1" id="age1" placeholder="age">
       <br>
       <div id="myCont"></div>
       <br>
       <input type="submit" id="btn" class="btn" value="SUBMIT">
     </form>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

-腳本代碼-

 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (){
            $("#btn").click(function (e){
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    async: false,
                    url:"page1.php",
                    dataType: 'json',
                    cache: false,
                    success: function (result) {
                            $("#myCont").html(result);
                    },
                    error: function () {
                        alert("server error");
                    }
                });
            });
        });
    </script>

================================================== ======================

現在，創建另一個名為Page1.php的頁面，其中將包含您的數據庫插入代碼。

<?php
if(isset($_POST))
{
  $name = $_POST['name1'];
  $age = $_POST['age1'];

  $servername = "localhost";
  $username = "username";
  $password = "password";
  $dbname = "myDB";

  // Create connection
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  // Check connection
  if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
  }

  $sql = "INSERT INTO user_details (name, age)
  VALUES ($name, $age)";

  if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
  } else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
  }

  mysqli_close($conn);
}
?>

我以前已經嘗試過了，並且工作非常好。

希望這對您有用。