javascript - 弹出表单数据不插入数据库

Question

我正在尝试使用 ajax post 方法将数据插入到我的 PHP 中。我已将第一个表单数据传递给第一个脚本中的隐藏值，但数据未插入数据库中。现在我想传递这些变量(响应。 lastname, response.firstname ) 到我的数据库中。请帮我解决这个问题。任何例子都会非常有用。提前谢谢你。

Ajax

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            Confirm Submit
        </div>   <form role="form" id="add_name"  method="post"  enctype="multipart/form-data" action="">
        <div class="modal-body">
                          <table class="table">
                <tr>
                    <th>Last Name</th>
                    <td id="lname" name="lname" ></td>
                </tr>
                <tr>
                    <th>First Name</th>
                    <td id="fname" name="fname"></td>
                </tr>
                <tr><td>name</td>
                <td><input type="text" name="nam"></td>
                </tr>     </table>

        </div> 
        <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>              
             <button    type="submit" class="btn btn-success" id="submit" name="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>

        </div>
    </div>
  </form><div id="response"></div>  


  <script>    

   $(document).ready(function(){  

        $('#submitBtn').click(function() {

            $('#lname').text($('#lastname').val());
        $('#fname').text($('#firstname').val());

            var fname = $('#firstname').val();
            $('#fname').val(fname);
            alert(fname);

            var laname = $('#lastname').val();
            $('#lname').val(laname);
            alert(laname);           
        });   

    });
</script>    


 <script>  
   $(document).ready(function(){  
  $('#submit').click(function(){  
       var lname = $('#lname').val();  
       var fname = $('#fname').val();  
     alert(lname);
            $.ajax({  
                 url:"insert.php",  
                 method:"POST",  
                 data:$('#add_name').serialize(),  
                 beforeSend:function(){  
                      $('#response').html('<span class="text-info">Loading response...</span>');  
                 },  
                 success:function(data){  
                      $('form').trigger("reset");  
                      $('#response').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#response').fadeOut("slow");  
                      }, 5000);  
                 }  
            });  

  });  
});  

  <?php  
 //insert.php  
 $connect = mysqli_connect("localhost", "root", "", "demoss");  

  $name = mysqli_real_escape_string($connect, $_POST["lname"]);  
  $message = mysqli_real_escape_string($connect, $_POST["fname"]);  
  $query = "INSERT INTO tbl_form(name, message) VALUES ('".$name."', '".$message."')";  
  if(mysqli_query($connect, $query))  
  {  
       echo '<p>You have entered</p>';  
       echo '<p>Name:'.$name.'</p>';  
       echo '<p>Message : '.$message.'</p>';  
  }  

 ?>  

Answer 1

试试这个:

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <form role="form" id="add_name" method="post">
                <div class="modal-body">
                    <table class="table">
                        <tr>
                            <td>Last Name</td>
                            <td><input type="text" name="lname" id="lname"></td>
                        </tr>
                        <tr>
                            <td>First Name</td>
                            <td><input type="text" name="fname" id="fname"></td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>
                                <input type="text" name="name" id="name">
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="submit">
                        <i class="glyphicon glyphicon-inbox"></i> Submit</button>

                </div>
        </div>
        </form>
        <div id="response"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>   


               $(document).ready(function () {
                    $('#submit').click(function () {
                        var lname = $('#lname').val();
                        var fname = $('#fname').val();
                        alert(lname);
                        $.ajax({
                            method: "POST",
                            url: "insert.php",
                            data: $('#add_name').serialize(),                            
                            beforeSend: function () {
                                $('#response').html('<span class="text-info">Loading response...</span>');
                            },
                            success: function (data) {
                                $('form').trigger("reset");
                                $('#response').fadeIn().html(data);
                                setTimeout(function () {
                                    $('#response').fadeOut("slow");
                                }, 5000);
                            }
                        });

                    });
                });

            </script>