通过AJAX点击按钮更新表单值

时间:2015-11-28 21:36:41

标签: javascript php jquery html ajax

我在段落字段上应用了一些jquery,并在输入字段中对它们进行了转换。它有效!但是当我通过ajax给出一些值后,我将它们发布到下一页,即address_update.php,它不会更新数据库中的值。请提出任何建议。

HTML

<form method="post" action="">
            <?php
            $em=$_SESSION['login_email'];
            $query = mysqli_query($con,"SELECT * FROM customers where email='$em'" );
            while($row=mysqli_fetch_assoc($query)){
            ?>

            <h5>Name:</h5><p  id="name"><?= $row['name'] ?></p>
            <h5>Email:</h5><p id="email"><?= $row['email'] ?></p>
            <h5>Telephone:</h5><p id="phone"><?= $row['phone'] ?></p>
            <h5>Address:</h5><p id="address"><?= $row['address'] ?></p>
             <h5>City:</h5><p id="city"><?= $row['city'] ?></p>

            <?php
            }
            ?>
            <input type="button" id="up" value="Update" >
                <input type="submit" id="update"  value="Update Address"   >
            </form>

的Ajax

   <script >
     $(document).ready(function() {

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

              var  name = $("#name").val(),
                    address = $("#address").val(),
                    phone = $("#phone").val(),
                    city = $("#city").val();

                $.ajax({
                    url: "address_update.php",
                    type: "POST",
                    async: true,
                    data: { Name: name, Address: address, Phone: phone, City:city},
                    dataType: "json",

                    success: function(data) {
                        if(data)
                        {
                            $("#error").html("Done. ");
                            // $("body").load("index.php?page=form");//.hide();//.fadeIn(1500).delay(6000);
                        }
                        else
                        {
                            $("#error").html("<span style='color:#cc0000'>Error:</span> Cant update. ");
                        }

                    }

                });
            });

        });
    </script>

的js

<script>
        $('#up').click(function() {
            var $name = $('#name');
            var $phone=$('#phone');
            var $address = $('#address');
            var $city=$('#city');


            var $input_name = $("<input>", {value: $name.text(),type: "text", id:"name"});
            var $input_phone = $("<input>", {value: $phone.text(),type: "text", id:"phone"});
            var $input_address = $("<input>", {value: $address.text(),type: "text" ,id:"address"});
            var $input_city = $("<input>", {value: $city.text(),type: "text",id:"city"});



            $name.replaceWith($input_name);
            $phone.replaceWith($input_phone);
            $address.replaceWith($input_address);
            $city.replaceWith($input_city);

            document.getElementById("update").style.display="block";
            document.getElementById("up").style.display="none";

            $input_name.select();
            $input_address.select();
             $input_phone.select();
            $input_city.select();


        });


    </script>

address_update.php

   if(isset($_SESSION["login_email"]) || isset( $_SESSION["login_user"]))
{
$name=$_POST['Name'];
    $address=$_POST['Address'];
    $phone=$_POST['Phone'];
    $city=$_POST['City'];
$email=$_SESSION['login_email'];


$sql=mysqli_query($con,"Update `customers` set `name`='".$name."',`address`='".$address."',`phone`='".$phone."',`city`='".$city."' where `email`='".$email."'");
    if($sql)
    {
echo "updated";
    }
    else{
        echo "no";
    }
}

1 个答案:

答案 0 :(得分:1)

你不能把jquery选择器放在json数组中,但无论如何,你有一个&#34; #add&#34;元素:

$(document).ready(function() {

   $('#add').click(function()
   {
      var name = $("#name").val(),
          address = $("#address").val(),
          phone = $("#phone").val(),
          city = $("#city").val(),
       $.ajax({
         url: "address_update.php",
         type: "POST",
         async: true,
         data: { Name: name, Address: address, Phone: phone, City:city},
         dataType: "json",

         success: function(data) {
             if(data)
             {
                 $("#error").html("Done. ");
                 // $("body").load("index.php?page=form");//.hide();//.fadeIn(1500).delay(6000);
             }
             else
             {
                 $("#error").html("<span style='color:#cc0000'>Error:</span> Cant update. ");
             }

          }

      });
  });

    });