0

我很快就制作了这个表单助手来引导用户完成注册表单

它适用于名称和用户名，但我想知道如何扩展它，以便除了名称之外的所有字段都被禁用。

一旦名称有一个值，只有用户名也被启用（这到目前为止有效）然后一旦用户名有一个值，密码将被启用，依此类推。

表单字段是名称、用户名、密码、密码确认和电子邮件

这是代码

$(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 回答
0

在 HTML 表单中，将所有禁用的属性硬设置为禁用（或在 $(document).ready() 中将它们全部禁用，因此它与 JS 不兼容）。然后概括您的辅助函数以将字段作为变量，然后获取下一个。像这样：

$(document).ready(function() {
    //Disable all input fields
    $('#myform input').attr("disabled", "disabled");
    //Bind the helper function to input fields on keyup
    $('#myform input').keyup(function() {
        var this_id = $(this).attr('id');
        helper(this_id);
    });
    //Call helper on "username" to kick things off
    helper('username');
});

function helper(field_id) {
    var messages = new Array(/*messages stored here, starting with "Hi!" at 0*/);
    var field_index = $('#'+field_id).index();
    if ( $('#'+field_id).val() == "" ) {
        var message = messages[field_index];
        $('#helper').text(message);
    } else {
        var next_index = field_index+1;
        var new_message = messages[next_index];
        $('#myform input:eq('+next_index+')').removeAttr('disabled');
        $('#helper').text(new_message);
    }
}

我没有测试过这个，它可能会更有说服力，但无论如何你应该把它放在你自己的风格中。我将所有输入作为“myform”ID 的子项，但如果它是表单独有的，您可以只使用“xlarge”类。也许您也可以拥有一个全局索引指针，而不是每次都从 ID 中获取它。

于 2012-08-03T16:44:30.437 回答