ajax提交modal里的form,jquery - AJAX form submission within modal window - Stack Overflow

I'm using fancybox to pop up modal windows for various form submissions on my site. when a user clicks the register button, a modal pops up with the registration form. upon clicking submit, the info is supposed to go to the database via a jquery ajax call. however, when submit is clicked, the page refreshes, with the submitted data sent back to the main page in the URL as GET. I have no idea why this is happening.

function openModal(name, width, height){

$.fancybox(

{

'content' : document.getElementById(name).innerHTML,

'autoDimensions' : false,

'width' : width,

'height' : height,

'transitionIn' : 'fade',

'transitionOut' : 'fade',

'overlayColor' : '#000'

}

);

}

$('.registerBtn').click(function(e) {

e.preventDefault();

openModal('register', 450, 'auto');

});

$("#register_submit").click(function(e){

//prevent the form from actually being submitted

e.preventDefault();

var error = Array();

// grab the user's info from the registration form

var username = $('input[name=register_name]');

var pass = $('input[name=register_pass]');

var confirm_pass = $('input[name=register_confirm_pass]');

var email = $('input[name=register_email]');

var confirm_email = $('input[name=register_confirm_email]');

// run some validation checks and add any errors to the array

if(username == '' || username.length < 2)

{

error.push('Your username is too short. Minimum of 2 characters, please.');

}

if(pass == '' || pass.length < 2)

{

error.push('Your password is too short. Minimum of 2 characters, please.');

}

if(pass != confirm_pass)

{

error.push('The passwords you entered did not match.');

}

if(email == '')

{

error.push('You must enter an email address.');

}

else

{

var validEmail = checkemail(email);

if(validEmail == false)

{

error.push('The email address you entered is not valid.');

}

else

{

if(email != confirm_email)

{

error.push('The email addresses you entered did not match.');

}

}

}

// if there were no errors, pass the user info to the processing script for further validation

if(error.length < 1)

{

var data = 'username=' + username.val() + '&password=' + pass.val() + '&email=' + encodeURIComponent(email.val());

$.ajax({

url: "data.php",

type: "POST",

data: data,

cache: false,

success: function(data) {

// the ajax request succeeded, and the user's info was validated and added to the database

if(data.response == 'good')

{

$("#register_error").fadeTo(200,0.1,function()

{

$(this).html('Registering your information...').fadeTo(900,1,function(){

$('#userInfo').html('' + data.username + '');

$(this).html('You have successfully registered and logged in!Close');

});

});

}

// ajax succeeded, but the username was in use

if(data.response == 'usernameBad')

{

$("#register_error").fadeTo(200,0.1,function() {

$(this).html('The username is already in use!').fadeTo(900,1,function(){

$(this).html('Let\'s try this again...');

setTimeout($.fancybox.close(), 3000);

openModal('register', 450, 'auto');

});

});

}

// ajax succeeded but the email was in use

if(data.response == 'emailBad')

{

$("#register_error").fadeTo(200,0.1,function() {

$(this).html('The email address is already in use!').fadeTo(900,1,function(){

$(this).html('Let\'s try this again...');

setTimeout($.fancybox.close(), 3000);

openModal('register', 450, 'auto');

});

});

}

}

});

}

else // errors in validating in first pass

{

// iterate through the errors and fade them into the error container in the modal window

for(var i = 0;i < error.length;i++)

{

$("#login_error").fadeTo(400,0.1,function(){

$(this).html(error[i]);

});

}

}

});