モーダルウィンドウ内でのAJAXフォームの提出

Question

私は、私のサイトの様々なフォーム提出のためのモーダルウィンドウをポップアップするためにfancyboxを使用しています。ユーザーが登録ボタンをクリックすると、登録フォームが表示されます。送信をクリックすると、情報はjquery ajax呼び出しによってデータベースに送られます。ただし、送信がクリックされると、ページがリフレッシュされ、送信されたデータがURLのメインページにGETとして返送されます。なぜこれが起こっているのか分かりません。

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('<a href="index.php?mode=viewMember&u=' + data.uid + '">' + data.username + '</a>'); 
           $(this).html('You have successfully registered and logged in!<br /><a href="javascript:;" onclick="$.fancybox.close();">Close</a>'); 
          }); 
         }); 
        } 
        // 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]); 
       }); 
      } 
     } 
    }); 

Answer 1

は、フォームの提出をこのように結合してみてください。

$('#MyFormId').bind('submit', function() { 

    //ajax post here 

    return false; //Ensures the form never actually "posts" and just stays on this page 
});