Question

当我点击按钮打开一个模态弹出窗口时，我有一个名为no of user的按钮..

所以我想要做的是在模式弹出窗口我尝试插入表单，一个字段输入数字..当他们点击提交我想将这些值存储在数据库中

这是我的按钮代码：

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

这是我的模态dailog代码：

<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脚本

- Modal PopUp表单代码 -

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

我之前已经尝试过，并且工作得非常好。

希望这对你有用。

使用jquery模式弹出提交表单

1 个答案: