jQuery + jQueryUI：確認ダイアログボックスを呼び出してページを更新します。

Question

AJAXベースのフォーム提出の作成に問題があります。応答が成功すると、フォームの上部に確認文字列が表示され、次にすべてのテキスト入力がリセットされ、確認ダイアログボックスが表示されます。 2つの選択肢：別のユーザー名を登録するかログインページに移動します）、そして最後に2つの選択肢がユーザーをそれぞれのページにリダイレクトします。

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 
    var disabled = $j("#submitRegister").button("option","disabled"); 
    $j("#submitRegister").button(); 
    function ajax_user_registration(){ 
     var re9me = $j("#mode_exec").val(); 
     var re9sh = $j("#securexhash").val(); 
     var re9xb = $j("#zblank").val(); 
     var re9un = $j("#requsername").val(); 
     var re9pw = $j("#reqpassword").val(); 
     var re9cp = $j("#reqconfpasswd").val(); 
     var re9ab = $j("#agreebox").val(); 
     if((re9xb == "") && (re9ab != "")){ 
      $j.ajax({ 
      type: "POST", 
      url: "registration.php", 
      data: 'username='+ re9un +'&password='+ re9pw +'&securehash='+ re9sh +'&agreeconfirm='+ re9ab, 
      cache: false, 
      success: function(response){ 
       if(response == 1){ 
        $j("#regboxnotice").removeClass().addClass('message-notice').text('Registration: SUCCESSFUL.').fadeIn(1000); 
        $j("#regAccount")[0].reset(); 
       }else if(response == 0){ 
        $j("#regboxnotice").removeClass().addClass('message-negative').text('Registration: FAILED.').fadeIn(1000); 
       }else{ 
        $j("#regboxnotice").removeClass().addClass('message-negative').text('Registration: FAILED.').fadeIn(1000); 
       } 
      } 
     }); 
     } 
    } 
    /* model function for checking username */ 
function ajax_check_username(){ 
    var username = $j('#requsername').val(); 
    if(username == ""){ 
     $j('#requsername').css('border', '3px #FFD400 solid'); 
     $j("#regboxnotice").removeClass().addClass('message-notice').text('Username: MIN. 6 CHARS.').fadeIn(1000); 
    }else{ 
     $j.ajax({ 
      type: "POST", 
      url: "validation.php", 
      data: 'username='+ username, 
      cache: false, 
      success: function(response){ 
       if(response == 1){ 
        $j('#requsername').css({'border': '3px #FF0000 solid'}); 
        $j("#regboxnotice").removeClass().addClass('message-negative').text('Username: UNAVAILABLE.').fadeIn(1000); 
       }else{ 
        $j('#requsername').css('border', '3px #009900 solid'); 
        $j("#regboxnotice").removeClass().addClass('message-positive').text('Username: AVAILABLE.').fadeIn(1000); 
       } 
      } 
     }); 
    } 
} 
    /* model function for checking password */ 
function ajax_check_password(){ 
    var password = $j('#reqpassword').val(); 
    if(password == ""){ 
     $j('#reqpassword').css('border', '3px #FFD400 solid'); 
     $j("#regboxnotice").removeClass().addClass('message-notice').text('Password: MIN. 6 CHARS.').fadeIn(1000); 
    }else{ 
     $j('#reqpassword').css('border', '3px #009900 solid'); 
     $j("#regboxnotice").removeClass().addClass('message-positive').text('Password: OK.').fadeIn(1000); 
    } 
} 
/* model function for checking password-confirmation */ 
function ajax_check_confpasswd(){ 
    var password = $j('#reqpassword').val(); 
    var confpasswd = $j('#reqconfpasswd').val(); 
    if(confpasswd != password){ 
     $j('#reqconfpasswd').css('border', '3px #FFD400 solid'); 
     $j("#regboxnotice").removeClass().addClass('message-negative').text('Conf. Password: RE-TYPE YOUR PASSWORD.').fadeIn(1000); 
    }else{ 
     $j('#reqconfpasswd').css('border', '3px #009900 solid'); 
     $j("#regboxnotice").removeClass().addClass('message-positive').text('Conf. Password: OK.').fadeIn(1000); 
    } 
} 
    /* AJAX username checking on-the-fly */ 
    $j('#userzname').keyup(ajax_check_logincomp); 
    $j('#requsername').keyup(ajax_check_username); 
    $j('#reqpassword').keyup(ajax_check_password); 
    $j('#reqconfpasswd').keyup(ajax_check_confpasswd); 
    /* AJAX form submission */ 
    $j('#submitRegister').bind('click', function(event) { 
     ajax_user_registration(); 
     event.preventDefault(); 
    }); 
}); 

とにかく、ありがとうございます。

Answer 1

コードを投稿する前にこれを作成しました。ログインとパスワードを持つシンプルなフォーム。

XHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>AJAX Form Submission</title> 
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="screen"/> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="my_script.js"></script> 
</head> 
<body> 
    <div id="dialog-confirm" title="Registration success"> 
     <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 20px 0;"></span>Your account have been created successfully.</p> 
    </div> 

    <form method="post" action="#" id="reg_form"> 
     <p><label for="reg_login">Login</label></p> 
     <p><input id="reg_login" type="text"/></p> 

     <p><label for="reg_password">Password</label></p> 
     <p><input id="reg_password" type="password" /></p> 

     <p><input type="submit"></p> 
    </form> 
</body> 
</html> 

Javascriptを：

$(document).ready(function() { 

    $("#dialog-confirm").hide(); 

    $('#reg_form').submit(function() { 

     $.post("check_user.php", 
      { login: $('#reg_login').val(), password: $('#reg_password').val() }, 
      function(data) { 
       if(data == 'ok') { // clear inputs 
        $('#reg_login').val(''); 
        $('#reg_password').val(''); 

        $("#dialog-confirm").dialog({ 
         resizable: false, 
         height:140, 
         modal: true, 
         buttons: { 
          "Register another": function() { 
           $(this).dialog("close"); 
           window.location = "http://www.example.com/register"; 
          }, 
          Cancel: function() { 
           $(this).dialog("close"); 
           window.location = "http://www.example.com/login"; 
          } 
         } 
        }); 

       } else { 
        // alert('error'); 
        $('.error').remove(); 
        $('#reg_form').before('<p class="error">Invalid login or password</p>'); 
       } 
      } 
     ); 

     return false; 
    }); 
}); 

PHP：スタックオーバーフローへ

<?php 
    $login = isset($_POST['login']) ? trim($_POST['login']) : ''; 
    $password = isset($_POST['password']) ? $_POST['password'] : ''; 

    // check login in DB (don't forget to escape...), check password length 
    // [...] 
    $valid = true; // toggle this to see 

    echo $valid ? 'ok' : ''; 
?>