Jquery form submission still refreshing - php

Question

I'm trying to add ajax form submission to a PHP web app I'm working on using jquery. The form is being submitted and writing to a database, but it'll still doing it all with a refresh.
Here's my code:
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name.]');
var customer123last_name = $('input[name=customer123last_name.]');
var customer123date_of_birth = $('input[name=customer123date_of_birth.]');
var customer123email_address = $('input[name=customer123email_address.]');
var customer123telephone_number = $('input[name=customer123telephone_number.]');
var customer123picture = $('input[name=customer123picture.]');
var customer123id_picture = $('input[name=customer123id_picture.]');
var customer123id_expiration = $('input[name=customer123id_expiration.]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});
Everything I've read online for this specific issue has found the return false; call to be in the wrong place or not there at all. I've checked mine is in the right place, I just can't find a reason why it's refreshing.
I know jquery is working because I use it to do popups windows which are working fine.
If you want to see the code in context, go to www.sfyfe.com/studioadmin

Answer 1

The problem is caused by the dot at the end of the selector on your $('input[name=customer123... lines. The dot isn't doing anything, and it's making the selector invalid. Removing the dots should fix the problem. Hope this helps!

Answer 2

Maybe
$("form#form_customer").submit(function(e) {
e.preventDefault();
});

Answer 3

You should send the data in JSON format , using : " data : data " is not valid ,
try:
$.ajax({
url: "inc/createObject.php",
type: "POST",
data:{dataField : data },

Answer 4

Your code should be like this.
$("form#form_customer").submit(function() {
var customer123first_name = $('input[name=customer123first_name]');
var customer123last_name = $('input[name=customer123last_name]');
var customer123date_of_birth = $('input[name=customer123date_of_birth]');
var customer123email_address = $('input[name=customer123email_address]');
var customer123telephone_number = $('input[name=customer123telephone_number]');
var customer123picture = $('input[name=customer123picture]');
var customer123id_picture = $('input[name=customer123id_picture]');
var customer123id_expiration = $('input[name=customer123id_expiration]');
var data = 'customer123first_name=' + customer123first_name.val() + '&customer123last_name=' + customer123last_name.val() + '&customer123date_of_birth=' + customer123date_of_birth.val() + '&customer123email_address=' + customer123email_address.val() + '&customer123telephone_number=' + customer123telephone_number.val() + '&customer123picture=' + customer123picture.val() + '&customer123id_picture=' + customer123id_picture.val() + '&customer123id_expiration=' + customer123id_expiration.val();
$.ajax({
url: "inc/createObject.php",
type: "POST",
data: data,
cache: false,
success: function(data){
$('form_success').fadeIn();
}
});
return false;
});