Question

I quickly made this form helper to walk a user through a sign up form

it works fine for name and username but im wondering how to expand it so that all fields are disabled apart from name to begin with.

Once name has a value, only username becomes enabled also (this works so far) then once username has a value, password will become enabled and so on.

The form fields are
name, username, password, password_confirm and email

here is the code

$(function() {
    var helper = function() {
        if ( $('#name').val() == "" ) {
            $('#username').attr("disabled", "disabled");
            $('#helper').text("Hi there! let's start by entering your name!");
        } else {
            $('#username').removeAttr('disabled');
            $('#helper').text("Great, now choose a username.");
        }
    };
    $('.input-xlarge').keyup(helper).change(helper);
});

cheers

Markup added

        <form class="form" method="post" action="sign_up.php" id="sign-up-form">
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="name"><?php _e('Full name'); ?></label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="name" name="name" value="<?php echo $signUp->getPost('name'); ?>" placeholder="<?php _e('Full name'); ?>">
                    </div>
                </div>
                <div class="control-group" id="usrCheck">
                    <label class="control-label" for="username"><?php _e('Username'); ?></label>                
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="username" name="username" maxlength="15" value="<?php echo $signUp->getPost('username'); ?>" placeholder="<?php _e('Choose your username'); ?>">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password"><?php _e('Password'); ?></label>                
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password" name="password" placeholder="<?php _e('Create a password'); ?>">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password_confirm"><?php _e('Password again'); ?></label>              
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" placeholder="<?php _e('Confirm your password'); ?>">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="email"><?php _e('Email'); ?></label>              
                    <div class="controls">
                        <input type="email" class="input-xlarge" id="email" name="email" value="<?php echo $signUp->getPost('email'); ?>" placeholder="<?php _e('Email'); ?>">
                    </div>
                </div>

                <div class="control-group">
                    <?php $signUp->profileSignUpFields(); ?>
                </div>

                <div class="control-group">
                    <?php $signUp->doCaptcha(true); ?>
                </div>

            </fieldset>
            <input type="hidden" name="token" value="<?php echo $_SESSION['user']['token']; ?>"/>
            <button type="submit" class="medium orange"><?php _e('Create my account'); ?></button>
        </form>

Answer 1

I would advise against disabling, in case they need to go back.

How about just doing something like this:

html:

<input type="text" id="name" title="do name"/>
<input type="text" id="username" title="do user"/>
<input type="text" id="tel" title="do tel" />
<input type="text" id="fax" title="do fax"/>

<div id="helper"></div>​

js:

function helper(e){

 var text = e.attr('title');
 $('#helper').text(text);

}

$(":input").click(function(){

    $(":input").css('background-color','#000000');
    $(this).css('background-color','#fff');
    helper($(this));

});

you can view the jsfiddle here http://jsfiddle.net/Rzha3/3/