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