AJAX代码不更新表

Here is my form, from which i want to update the values. When i try this with simple php+html it works perfectly!! But when i try to post values through ajax call it doesn't work.Any suggestions please.

HTML

<form class="form-block" role="form" action="" method="post">
 <div class="form-group">
 <?php
 $email=$_SESSION["login_email"];
 $query=mysqli_query($con,"select * from customers where email='$email'");
 while($row=mysqli_fetch_array($query,MYSQLI_ASSOC))
{
 ?>
<label for="name">Full Name</label>
<input type="text" name="name" class="form-control"   id="name" value="<?= $row["name"]; ?>" placeholder="Full Name">
 <label for="comment">Address</label>
 <textarea class="form-control" name="address" id="address" rows="5" id="comment"  ></textarea>
<label for="telephone">Telephone</label>
<input type="tel" class="form-control" name="phone" id="phone" placeholder="Enter Mobile Number" value="" >
  <label for="city">City</label>
 <input type="text" class="form-control" name="city" id="city" placeholder="Enter City" value="<?= $row["city"]; ?>" >
  </div>
 <?php
}?>
 <input type="submit" class="btn btn-default" name="add" id="add" value="Update"/>


<span class='msg'></span>
   <div id="error"></div>
   </form>

AJAX

 $(document).ready(function() {
$('#add').click(function()
        {
            $.ajax({
                url: "address_update.php",
                type: "POST",
                async: true,
                data: { Name:$("#name").val(),Address:$("#address").val(), Phone:$("#phone").val(), City:$("#city").val()}, //your form data to post goes here as a json object
                dataType: "html",

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

PHP

<?php
include ("db/db.php");
session_start();

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

This selector:

$('#add')

doesn't find anything. Because there is no HTML element in your markup with id="add".

You do have an element with name="add". So either add an id to that element:

<input id="add" type="submit" class="btn btn-default" name="add" value="Update"/>

or change your selector to target the existing element:

$('input[name="add"]')

Note: The same is also true of $('#address') and $('#phone'). No such elements exist in your markup. Take a look at the jQuery documentation for selectors.

Remove the IF loop mentioned under

if(isset($_SESSION["login_email"]))

Additionally, you nee to change the button type from submit to button

<input type="submit" class="btn btn-default" name="add" value="Update"/>

Above sends the form, whatever you add to the click event is done in parralel.

<input type="button" class="btn btn-default" name="add" value="Update"/>

only executes your JavaScript, when using:

 $('input [name="add"]').click(function(){
   // your improved ajax call here
 }

Try this:

$.ajax({
    .
    .
    data: {
    'Name': $name,
    'address': $address,
    .
    .
}
});