AJAX code not updating table - php

Question

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

Answer 1

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.

Answer 2

Remove the IF loop mentioned under
if(isset($_SESSION["login_email"]))

Answer 3

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
}

Answer 4

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