Question

I have a problem in creating an AJAX-based form submission which if its response is success, it shows a confirmation string at the top of the form, then resets all of the text input, then shows a confirmation dialog box (which has 2 choices: register another username or go to login page), and finally the two choices mentioned redirect the user to the respective page(s).

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();
    });
});

Anyway, thank you for your attention.

Answer 1

I created this before you post your code. Simple form with login and password.

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' : '';
?>