Question

我很快就制作了这个表单助手，让用户通过注册表单

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

一旦name有值，只有用户名也会启用（这个工作到目前为止），那么一旦用户名有值，密码就会启用，依此类推。

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

这是代码

$(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>

Answer 1

如果他们需要返回，我建议不要禁用。

如何做这样的事情：

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/

Answer 2

在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中获取它。

jquery表单助手 - 添加更多字段

2 个答案: