使用ajax和PHP提交已编辑表单的问题

时间：2017-01-12 19:30:07

标签： php jquery ajax

当我尝试将First_Name和Last_Name更新到数据库时，会将空表单传递给数据库，因此不会更新任何信息。我需要帮忙吗？

这是迄今为止的工作.... 的index.php 

<html>  
      <head>  


                     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

      </head>  
      <body>  
           <div class="container">  

                     <div id="disp_data"></div>                 
                </div> 
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      function fetch_data()  
      {  
           $.ajax({  
                url:"select.php",  
                method:"POST",  
                success:function(data){  
                     $('#disp_data').html(data);  
                }  
           });  
      }  
      fetch_data();  



//edit

  $(document).on('click', '#edit', function(){  
var id=$(this).data("id4"); 
//var first_name = $('#first_name').text();  
//var last_name = $('#last_name').text(); 


var first_name = $('#first_name').val();  
var last_name = $('#last_name').val(); 




if(id == '')  
           {  
                alert("Id is assigned automatically..");  
                return false;  
           }  


if(first_name == '')  
           {  
                alert("Enter First Name");  
                return false;  
           }  
           if(last_name == '')  
           {  
                alert("Enter Last Name");  
                return false;  
           }  


           if(confirm("Are you sure you want to edit this?"))  
           {  
                $.ajax({  
                     url:"edit.php",  
                     method:"POST",  
                     data:{id:id},  
                     dataType:"text",  
                     success:function(data){ 

if(data==1)    {


alert('data edited Successfully ....!');
} 

                          fetch_data();  
                     }  
                });  
           }  
      });
 });  
 </script>

select.php 

 <?php  


$db = new PDO (
    'mysql:host=localhost;dbname=db_name;charset=utf8', 
    'root', // username

    '' // password
);


 $output = '';  
$result = $db->prepare('SELECT * FROM empinfo ORDER BY id DESC');

        $result->execute(array());
$count = $result->rowCount();
 $output .= '  
      <div align="center">  
           <table border="1" bordercolor="#00CCCC">  
                <tr>  
                     <th width="10%">Id</th>  
                     <th width="40%">First Name</th>  
                     <th width="40%">Last Name</th>  

                </tr>';   
if($count > 0) 
 {  
while($row = $result->fetch()){ 

           $output .= '  
                <tr>  
                     <td>'.$row["id"].'</td>  
                     <td class="first_name" first_name="'.$row["first_name"].'" contenteditable>'.$row["first_name"].'</td>  
                     <td class="last_name" first_name="'.$row["last_name"].'" contenteditable>'.$row["last_name"].'</td>  

<td><button type="button" name="edit" data-id4="'.$row["id"].'" id="edit">Edit</button></td>  
                </tr>  
           ';  
      }  
      $output .= '  
           <tr>  
                <td></td>  
                <td id="first_name" contenteditable></td>  
                <td id="last_name" contenteditable></td>  

           </tr>  
      ';  
 }  
 else  
 {  
      $output .= '<tr>  
                          <td colspan="4">Data not Found</td>  
                     </tr>';  
 }  
 $output .= '</table>  
      </div>';  
 echo $output;  
 ?>

edit.php 

<?php 

error_reporting(0);


$db = new PDO (
    'mysql:host=localhost;dbname=chat;charset=utf8', 
    'root', // username

    '' // password
);


 $id = $_POST["id"];
$fn = $_POST["first_name"];  
 $ln = $_POST["last_name"];



$update1 = $db->prepare('
            UPDATE empinfo set
            first_name = :first_name,last_name=:last_name
            WHERE id= :id');

        if($update1->execute(array(
            ':first_name' => $fn,':last_name' => $ln,
            ':id' => $id))){
echo 'Data Updated';

}
 ?>

2 个答案:

答案 0 :(得分：1)

我在edit.php中看到您尝试获取firstname和lastname值，但是从您的JS部分发送了这些值，结果edit.php中没有任何信息所以我建议你发送ajax请求，以便获得它们：

if(confirm("Are you sure you want to edit this?"))  
           {  
                $.ajax({  
                     url:"edit.php",  
                     method:"POST",  
                     data:{"id":id,"first_name":first_name,"last_name":last_name},  
                     dataType:"text",  
                     success:function(data){ 

if(data==1)    {


alert('data edited Successfully ....!');
}

现在您已使用ajax请求发送了所需的值，因此您可以通过键入edit.php轻松地在$fn = $_POST["first_name"];中获取这些值 我希望它有用

答案 1 :(得分：0)

以下是一些可能有用的更新：

https://jsfiddle.net/Twisty/t2pgt267/

<强> HTML 

<div class="container">
  <div id="disp_data">
    <div align="center">
      <table border="1" bordercolor="#00CCCC">
        <tr>
          <th width="10%">Id</th>
          <th width="40%">First Name</th>
          <th width="40%">Last Name</th>
        </tr>
        <tr>
          <td>998</td>
          <td class="first_name" data-first-name="Jane" contenteditable>Jane</td>
          <td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
          <td>
            <button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
          </td>
        </tr>
        <tr>
          <td>999</td>
          <td class="first_name" data-first-name="John" contenteditable>John</td>
          <td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
          <td>
            <button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
          </td>
        </tr>
        <tr>
          <td></td>
          <td id="first_name" contenteditable></td>
          <td id="last_name" contenteditable></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<强>的jQuery 

 $(document).ready(function() {
   function fetch_data() {
     $.ajax({
       url: "select.php",
       method: "POST",
       success: function(data) {
         $('#disp_data').html(data);
       }
     });
   }
   fetch_data();
   //edit

   $(document).on('click', '.edit_button', function(e) {
     var id = $(this).data("name-id");

     var first_name = $(this).closest("tr").find(".first_name").val();
     var last_name = $(this).closest("tr").find(".last_name").val();

     if (id == '') {
       alert("Id is assigned automatically..");
       return false;
     }

     if (first_name == '') {
       alert("Enter First Name");
       return false;
     }
     if (last_name == '') {
       alert("Enter Last Name");
       return false;
     }

     if (confirm("Are you sure you want to edit this?")) {
       $.ajax({
         url: "edit.php",
         method: "POST",
         data: {
           "id": id,
           "first_name": first_name,
           "last_name": last_name
         },
         dataType: "text",
         success: function(data) {
           if (data == 1) {
             alert('data edited Successfully ....!');
           }
           fetch_data();
         }
       });
     }
   });
 });
相关问题
最新问题