Updating form values on button click through AJAX

Question

I applied some jquery on my paragraph fields and converted them in input fields.It works!! But when i post them to next page i.e address_update.php after giving some values through ajax it does not update the values in database. Any suggestions please.

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";
    }
}

You have to define isn't working. What DOES it do? What do you WANT it to do? Does it throw errors? (FYI, nice job using mysqli instead of mysql)! — random_user_name
– random_user_name, Commented Nov 28, 2015 at 21:38
@wateriswet Can I up-vote this about 100 more times ;) I have seen about 20 query questions on SO today and just one did it right.... — VIDesignz
– VIDesignz, Commented Nov 28, 2015 at 21:48
Are you sure you are getting all the values properly in your PHP proccessing file? Are you getting any sql errors? — VIDesignz
– VIDesignz, Commented Nov 28, 2015 at 21:51

Franco · Accepted Answer · 2015-11-29 18:40:24Z

1

You can not put the jquery selectors in the json array, but anyway supposig you have an "#add" element:

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

          }

      });
  });

    });

edited Nov 29, 2015 at 18:40

answered Nov 29, 2015 at 3:06

Franco

2,3291 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

tabia Over a year ago

thanks for the answer! But i have applied some jquery to convert the text into textbox and save the values that is given in it.

Franco Over a year ago

In this case if you are sure the you have iput value you can try the ajax call I have posted yesterday here above.

tabia Over a year ago

i tried this code!! but when i click on update button it gets hang!!

Franco Over a year ago

Do you have a button with the id of '#add', maybe I am wrong but as long as I see I don't see I can not find any button with this Id. Let me know and I will try to solve this issue.

Franco Over a year ago

If you click on this button now it should respond! Let me know what the ajax now will do!

|

Collectives™ on Stack Overflow

Updating form values on button click through AJAX

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related