CODEWITHSUNDEEP
javascriptphpajax
think_user
think_user

Reputation: 393

pop up form data not insert in database

I'm trying to insert data to my PHP using ajax post method.I have passed the first form data to hidden value in first script , but data is not inserted in database.Now I want to pass those variables (response.lastname, response.firstname ) into my database.Please help me to solve this issue. Any example will be very useful.. thank u in advance.

php 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>';  
  }  

 ?>

Upvotes: 2

Views: 1074

Answers (2)

Peter Mlich
Peter Mlich

Reputation: 1

data:$('#add_name').serialize(), - this convert inputs / textareas in form to one string for url. Your form not have inputs. Try
alert($('#add_name').serialize()) or<br>

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

And, may be second problem, if you call two times $(document).ready, may be rewrite first code with second. Combine to one $(document).ready.<br>

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

Upvotes: 0

sumitjainjr
sumitjainjr

Reputation: 771

Try This:

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

Upvotes: 1

Related Questions