Jquery not being called [closed] - html

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
First here's my code
Ok my problem is That when trying to use the registration form it doesn't call the code.
i have examined this several times and cant seem to find a problem i'm using the login script on the same page and that seems just fine.
login.js
$(function() {
// Expand
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Change Text
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// Login proccess Start
$('.error').hide();
$(".bt_login").click(function() {
// validate input
$('.error').hide();
var username = $("input#username").val();
if (username == "") {
$("label#username_error").show();
$("input#username").focus();
return false;
}
var password = $("input#password").val();
if (password == "") {
$("label#password_error").show();
$("input#password").focus();
return false;
}
var rememberMe = $("input#rememberMe").val();
// correct data sent
var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "../../inc/files/login.php",
data: dataString,
success: function() {
return false;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#login_form').html("<div id='message'></div>");
$('#message').html("<h2>!</h2>")
.append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='cross' src='images/cross.png' />");
});
return false;;
}
});
});
// End login proccess
//Registration Process start
$("bt_register").click(function() {
// validate inpu
$('.error').hide();
var username2 = $("input#username2").val();
if (username2 == "") {
$("label#username2_error").show();
$("input#username2").focus();
return false;
}
// var re = new RegExp("/[^a-z0-9\-\_\.]+/i");
// if(re.test(username2) = true) {
// $("label#username2_error2").show();
// $("input#username2").focus();
// return false;
// }
var password2 = $("input#password2").val();
if (password2 == "") {
$("label#password2_error").show();
$("input#password2").focus();
return false;
}
var email = $("input#email").val();
if (password == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
// correct data sent
var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email;
alert (dataString);return false;
$.ajax({
type: "POST",
url: "../../inc/files/login.php",
data: dataString,
success: function() {
return false;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#reg_form').html("<div id='message'></div>");
$('#message').html("<h2>!</h2>")
.append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='cross' src='images/cross.png' />");
});
return false;
}
});
});
});
html form calling the Jquery
<div id="reg_form">
<form class="clearfix" action="" >
<h1>Register Here!</h1>
<label class="grey" for="username">Username:</label>
<input class="text-input" type="text" name="username2" id="username2" value="" size="23" />
<label class="error" for="username2" id="usernamename2_error">This field is required.</label>
<label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label>
<label class="grey" for="email">Email:</label>
<input class="text-input" type="text" name="email" id="email" size="23" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label class="grey" for="password2">Password:</label>
<input class="text-input" type="password" name="password2" id="password2" size="23" />
<label class="error" for="password2" id="password2_error">This field is required.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>

Answer 1

Change
$("bt_register").click(function() {
TO
$(".bt_register").click(function(event) {
event.preventDefault();
Second error is if (password == "") { because for .bt_register click event you did not defined password variable.
What you can do is define var password; as global so every click event function can use it.
I have modified your code here is what i did and which is alerting passed string.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
var password;
$("#open").click(function()
{
$("div#panel").slideDown("slow");
});
$("#close").click(function()
{
$("div#panel").slideUp("slow");
});
$("#toggle a").click(function ()
{
$("#toggle a").toggle();
});
$('.error').hide();
// Start login proccess
$(".bt_login").click(function(event)
{
event.preventDefault();
$('.error').hide();
var username = $("input#username").val();
if (username == "")
{
$("label#username_error").show();
$("input#username").focus();
return false;
}
password = $("input#password").val();
if (password == "")
{
$("label#password_error").show();
$("input#password").focus();
return false;
}
var rememberMe = $("input#rememberMe").val();
var dataString = 'username='+ username + '&password=' + password + '&submit=Login' + '&rememberMe=' + rememberMe;
alert (dataString);return false;
$.ajax(
{
type: "POST",
url: "../../inc/files/login.php",
data: dataString,
success: function()
{
return false;
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
$('#login_form').html("<div id='message'></div>");
$('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function() {
$('#message').append("<img id='cross' src='images/cross.png' />");
});
return false;;
}
});
});
// End login proccess
//Registration Process start
$(".bt_register").click(function(event)
{
event.preventDefault();
// validate inpu
$('.error').hide();
var username2 = $("input#username2").val();
if (username2 == "")
{
$("label#username2_error").show();
$("input#username2").focus();
return false;
}
var password2 = $("input#password2").val();
if (password2 == "")
{
$("label#password2_error").show();
$("input#password2").focus();
return false;
}
var email = $("input#email").val();
if (password == "")
{
$("label#email_error").show();
$("input#email").focus();
return false;
}
// correct data sent
var dataString = 'username='+ username2 + '&password=' + password2 + '&submit=Register' + '&email=' + email;
alert (dataString);return false;
$.ajax(
{
type: "POST",
url: "../../inc/files/login.php",
data: dataString,
success: function()
{
return false;
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
$('#reg_form').html("<div id='message'></div>");
$('#message').html("<h2>!</h2>").append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown,"</p>").hide().fadeIn(1500, function()
{
$('#message').append("<img id='cross' src='images/cross.png' />");
});
return false;
}
});
});
});
</script>
<div id="reg_form">
<form class="clearfix" action="" >
<h1>Register Here!</h1>
<label class="grey" for="username">Username:</label>
<input class="text-input" type="text" name="username2" id="username2" value="" size="23" />
<label class="error" for="username2" id="usernamename2_error">This field is required.</label>
<label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!</label>
<label class="grey" for="email">Email:</label>
<input class="text-input" type="text" name="email" id="email" size="23" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label class="grey" for="password2">Password:</label>
<input class="text-input" type="password" name="password2" id="password2" size="23" />
<label class="error" for="password2" id="password2_error">This field is required.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>

Answer 2

Instead i suggest you to do this with submit form:
$("#reg_form").children('form').submit(function (e) {
e.preventDefault(); //<------------stops the submission
// validate inpu
$('.error').hide();
var username2 = $("input#username2").val();
if (username2 == "") {
$("label#username2_error").show();
$("input#username2").focus();
return false;
}
var password2 = $("input#password2").val();
if (password2 == "") {
$("label#password2_error").show();
$("input#password2").focus();
return false;
}
var email = $("input#email").val();
if (password == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
// correct data sent
var dataString = $(this).serialize();
alert(dataString);
$.ajax({
type: "POST",
url: "../../inc/files/login.php",
data: dataString,
success: function () {
alert('success.');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$('#reg_form').html("<div id='message'></div>");
$('#message').html("<h2>!</h2>")
.append("<p>Error Details; <br /> Status: ", textStatus, " <br /> Error thrown: ", errorThrown, "</p>")
.hide()
.fadeIn(1500, function () {
$('#message').append("<img id='cross' src='images/cross.png' />");
});
return false;
}
});
});

Answer 3

ok
i thik your var dataString is not well formatted
you can try this syntax
data: '{LiveID: "' + Live_ID + '", CategoryID: "' + Category_ID + '"}',

Answer 4

This allowed me to create a label and have it link to a predefined function. Enclude the function within the body of the document and before the label.
<label class="error" for="username2" id="usernamename2_error2">Your username contains invalid characters!
function(open)