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

Updating form values on button click through AJAX

本文关键字:表单 按钮 AJAX 更新 通过      更新时间:2023-09-26

我对段落字段应用了一些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";
    }
}

您不能将jquery选择器放在json数组中,但无论如何都假设您有一个"#add"元素:

$(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. ");
             }
          }
      });
  });
    });