ポップアップフォームのデータがデータベースに挿入されない

Question

私はポストメソッドを使ってPHPにデータを挿入しようとしています。最初のフォームデータを最初のスクリプトの隠し値に渡しましたが、データはdatabase.Nowに挿入されませんこれらの変数（response.lastname、response.firstname）を私のデータベースに渡したいと思います。この問題を解決するのを助けてください。どの例も非常に便利です。事前にuに感謝します。

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

Answer 2

data:$('#add_name').serialize()

のPHP AJAX、 - これは、URLのために1つの文字列に形式で入力/テキストエリアに変換します。フォームに入力がありません。
alert($('#add_name').serialize())または<br>

alert($('#add_name').serialize().toSource()) // firefox <br>

を試してみて、あなたは2回$(document).ready,を呼び出す場合は、2番目と書き換え最初のコードであってもよい、第二の問題かもしれません。 1 $(document).ready.<br>

$(document).ready(function(){ callfunction1(); callfunction2(); }