Undefined result from Ajax - php

Question

I am passing some form variables through to a php page using Ajax, however when the php code runs the table rows are filled with the value undefined.
I have checked the php code, substituting the form variables and that works fine and so i am thinking that the problem is with the Ajax code,
AJAX
$(document).ready(function(){
$('form.submit').submit(function () {
var name = $(this).find('.name').attr('value');
var address = $(this).find('.address').attr('value');
var number = $(this).find('.number').attr('value');
var price = $(this).find('.price').attr('value');
var deposit = $(this).find('.deposit').attr('value');
var product = $(this).find('.product').attr('value');
var payment_type = $(this).find('.payment_type').attr('value');
var deal_date = $(this).find('.deal_date').attr('value');
var install_date = $(this).find('.install_date').attr('value');
var installed = $(this).find('.installed').attr('value');
var notes = $(this).find('.notes').attr('value');
var contract_received = $(this).find('.contract_received').attr('value');
// ...
$.ajax({
type: "POST",
url: "add.php",
data: "name="+ name +"& address="+ address +"& number="+ number +"& price="+ price +"& deposit="+ deposit +"& product="+ product +"& payment_type="+ payment_type +"& deal_date="+ deal_date +"& install_date="+ install_date +"& installed="+ installed +"& notes="+ notes +"& contract_received="+ contract_received,
success: function(){
$('form.submit').hide(function(){$('div.success').fadeOut();});
}
});
return false;
});
});
HTML
<form id="submit" name="submit" class="submit">
<input name="name" id="name" type="text" class="form-control" placeholder="Name"/><br />
<input name="address" id="address" type="text" class="form-control" placeholder="Address"/><br />
<input name="number" id="number" type="text" class="form-control" placeholder="Number"/><br />
<input name="price" id="price" type="text" class="form-control" placeholder="Price"/><br />
<input name="deposit" id="deposit" type="text" class="form-control" placeholder="Deposit"/><br />
<input name="product" id="product" type="text" class="form-control" placeholder="Product"/><br />
<input name="payment_type" id="payment_type" type="text" class="form-control" placeholder="Payment"/><br />
<input name="deal_date" id="deal_date" type="text" class="form-control" placeholder="Deal Date"/><br />
<input name="install_date" id="install_date" type="text" class="form-control" placeholder="Install Date"/><br />
<input name="installed" id="installed" type="text" class="form-control" placeholder="Installed"/><br />
<textarea name="notes" id="notes" cols="" rows="" class="form-control" placeholder="Notes"></textarea><br />
<input name="contract_received" id="contract_received" type="text" class="form-control" placeholder="Contract Received"/><br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
PHP
$name = htmlspecialchars(trim($_POST['name']));
$address = htmlspecialchars(trim($_POST['address']));
$number = htmlspecialchars(trim($_POST['number']));
$price = htmlspecialchars(trim($_POST['price']));
$deposit = htmlspecialchars(trim($_POST['deposit']));
$product = htmlspecialchars(trim($_POST['product']));
$payment_type = htmlspecialchars(trim($_POST['payment_type']));
$deal_date = htmlspecialchars(trim($_POST['deal_date']));
$install_date = htmlspecialchars(trim($_POST['install_date']));
$installed = htmlspecialchars(trim($_POST['installed']));
$notes = htmlspecialchars(trim($_POST['notes']));
$contract_received = htmlspecialchars(trim($_POST['contract_received']));
$addClient = "INSERT INTO DATA (
name, address,number,price,deposit,product,payment_type,deal_date,install_date,installed,notes,contract_recieved)VALUES('$name','$address','$number','$price','$deposit','$product','$payment_type','$deal_date','$installed_date','$installed','$notes','$contract_received')";
mysql_query($addClient) or die(mysql_error());

Answer 1

You are making it very hard for yourself. There is no need to get all individual values from the form if you are sending the whole form. But if you do, you need to encode each value correctly using encodeURIComponent(). And don't send any spaces in your query string either.
The easiest solution is to have jQuery serialize your form and send that:
$.ajax({
type: "POST",
url: "add.php",
data: $('form.submit').serialize(), // or just: data: $(this).serialize(),
success: function(){
$('form.submit').hide(function(){$('div.success').fadeOut();});
}
});
Now all key-value pairs from the form will be sent correctly and jQuery will also take care of the encoding for you.

Answer 2

The correct syntax is http://api.jquery.com/jQuery.ajax/
data: {name: name, address: address, number: number}
and so on.