0

My problem is simple and straight forward, when accepting terms and conditions it takes 3 clicks to get the job done. I believe it is because it selecting log info. basically i just want the register button to appear when you type your name and click accept.

Here is the HTML Code:

<form id="register-form" name="register-form" method="post" action="register.php">
            <div class="rowbox">
                <label for="username">User Name <strong class="Redstar">*</strong>

                </label>
                <input type="text" id="username" name="username" class="txtbar req" tabindex="1">
                <div class="infobox">Not a valid user name!</div>
            </div>
            <div>
                <p class="checkbox"> <strong class="Redstar">*</strong> I Accept VD Loops <a href="termsconditions.html">Terms & Conditions</a>

                </p>
                <input type="checkbox" id="termscons" name="termscons" class="txtbar" tabindex="12">
                <div class="infobox"></div>
            </div>
            <div class="clear3"></div>
            <div class="registerbtn2">
                <input type="submit" value="Register" id="sendbtn" name="sendbtn">
            </div>
        </form>

Here is the JQuery:

$(document).ready(function () {
// hide send button 
$("#sendbtn").css("display", "none");

$(".txtbar, .txtbox").live("focus click", function () {

    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');
    var pxlchange = '-300px';

    if (currid == "username") {
        pxlchange = '-145px'; }

    rowbox.addClass('colors');

    thelabel.animate({
        left: pxlchange
    }, 350, 'linear', function () {
        // animation complete
    });

    infobox.animate({
        opacity: 1.0
    }, 350, 'linear', function () {
        // animation complete
    });

    $(this).on("change keyup", function () {
        var theval = $(this).val();
        var limitval = 3;
        var checkbox = $('#termscons').is(':checked');
        var replacehtml = "";
        var usernameinfohtml = "Not a valid user name!";

        if (currid == "username") {
            replacehtml = usernameinfohtml;
            limitval = 3; }

        // checking against e-mail regex
        if (currid == "email") {
            if (checkValidEmailAddress(theval)) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (!checkValidEmailAddress(theval)) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        } else {
            // we use this logic to check the name field
            if (theval.length >= limitval) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (theval.length < limitval) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }

            if (currid == "termscons") {
                // we use this logic for the check box
                if ($('#termscons').is(':checked')) {
                    infobox.addClass('good');
                } else {
                    infobox.removeClass('good');
                }
            }
        }

        // check if we can display the send button
        if ($('#username').next().hasClass('good') &&
            $('#termscons').next().hasClass('good')) {

            $("#sendbtn").css("display", "block");
        } else {
            $("#sendbtn").css("display", "none");

        }
    });
});

$(".txtbar, .txtbox").live("blur", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');

    rowbox.removeClass('colors');

    infobox.animate({
        opacity: 0
    }, 400, 'linear', function () {
        // animation complete
    });
});});

Here is the JSFiddle

4

1 回答 1

1

我想我找到了。

在您的脚本中，您有 2 个侦听器。

在第二个中，您从第一次单击“导入” $(this)/ currid，因此当您单击复选框时，第二个侦听$(this).on("change keyup", function () {器仍然认为您在用户名中。只有在第二次单击后，第一个侦听器才会将复选框分配给currid.

检查这个，看看控制台。

于 2013-08-07T07:26:23.100 回答