使用jQuery模式弹出窗口提交表单

Question

i have button called no of users when i click on the button it opens one modal popup..

so what i am trying to do is in the modal popup i am trying t insert form with one field enter number..and when they click submit i want to store those values in database

here is my button code:

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

here is my modal dailog code:

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

can anyone help me how to do

Thanks in advance..

Answer 1

For, an example first you have to create your modal popup form and ajax script in the index.php file

--Modal PopUp Form code--

 <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 Code--

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

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

Now create another page named Page1.php which will contain your database insert code.

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

I have been tried this previously and working very nice.

Hope this will work for you.