0

私はすぐにこのフォーム ヘルパーを作成して、ユーザーにサインアップ フォームを案内しました

名前とユーザー名に対しては問題なく機能しますが、最初から名前以外のすべてのフィールドが無効になるように拡張する方法を考えています。

名前に値が設定されると、ユーザー名のみが有効になり (これは今のところ機能します)、ユーザー名に値が設定されると、パスワードが有効になります。

フォーム フィールドは、name、username、password、password_confirm、email です。

ここにコードがあります

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

乾杯

マークアップが追加されました

        <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>
4

2 に答える 2

0

戻る必要がある場合に備えて、無効にすることはお勧めしません。

このようなことをするだけではどうですか：

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

});

ここでjsfiddleを表示できますhttp://jsfiddle.net/Rzha3/3/

于 2012-08-03T16:38:04.543 に答える