Skip to main content

First JQuery project… a little stuck



Last night someone on here really helped me out a lot with my first validation from scratch, i brought it alot further since last night. This is the first time I'm touching JQuery, I apologize for my crumby coding. Here's what I have that works fine and dandy for the validation UP until the last else statement:







//VALIDATE FIRST REGISTER PAGE!

$('#submit1').live('click', function() {

check_value1();



});



function check_value1(){

var firstname = $('#firstname').val();

var lastname = $('#lastname').val();

var email = $('#email').val();

var password = $('#password').val();

var username = $('#username').val();



if(firstname =='' || firstname.length <2)

$('#fnameError').fadeIn().fadeOut(5000);



else if(lastname =='' || lastname.length <2)

$('#lnameError').fadeIn().fadeOut(5000);



else if(email =='' || email.length <5)

$('#emailError').fadeIn().fadeOut(5000);



else if(password =='' || password.length <6)

$('#passError').fadeIn().fadeOut(5000);



else if(username =='' || username.length <5)

$('#usernameError').fadeIn().fadeOut(5000);



else

{

$('#register1').fadeOut();

$('#register2').fadeIn();

}

}



//VALIDATE SECOND REGISTER PAGE



$('#submit2').live('click', function() {

check_value2();

});



function check_value2(){



var gender = $('#gender').val();

var seeking = $('#seeking').val();

var month = $('#month').val();

var day = $('#day').val();

var year = $('#year').val();





if(gender =='' || gender.length <4)

$('#genderError').fadeIn().fadeOut(5000);



else if(seeking =='' || seeking.length <4)

$('#seekingError').fadeIn().fadeOut(5000);



else if(month =='' || month.length > 2)

$('#monthError').fadeIn().fadeOut(5000);



else if(day =='' || day.length > 2)

$('#dayError').fadeIn().fadeOut(5000);



else if(year =='' || year.length > 4 || year > 1994 )

$('#yearError').fadeIn().fadeOut(5000);



else

{

$('#register2').fadeOut();

$('#register3').fadeIn();

}



}



//VALIDATE THIRD PAGE



$('#submit3').live('click', function() {

check_value3();

});



function check_value3(){



var height = $('#height').val();

var body_type = $('#body_type').val();

var ethnicity = $('#ethnicity').val();

var religion = $('#religion').val();



if(height =='' || height.length <3)

$('#heightError').fadeIn().fadeOut(5000);



else if(body_type =='' || body_type.length <4)

$('#bodyError').fadeIn().fadeOut(5000);



else if(ethnicity =='' || ethnicity.length <5)

$('#ethError').fadeIn().fadeOut(5000);



else if(religion =='' || religion.length <5)

$('#relError').fadeIn().fadeOut(5000);



else

{

$('#register3').fadeOut();

$('#register4').fadeIn();

}



}



//VALIDATE FOUTH PAGE



$('#submit4').live('click', function() {

check_value4();

});



function check_value4(){



var city = $('#city').val();

var state = $('#state').val();

var zip = $('#zip').val();



if(city =='' || city.length <2)

$('#cityError').fadeIn().fadeOut(5000);



else if(state =='' || state.length <2)

$('#stateError').fadeIn().fadeOut(5000);



else if(zip =='' || zip.length <5)

$('#zipError').fadeIn().fadeOut(5000);



else

{



var firstnameA = encodeURIComponent($('#firstname').val());

var lastnameA = encodeURIComponent($('#lastname').val());

var emailA = encodeURIComponent($('#email').val());

var passwordA = encodeURIComponent($('#password').val());

var usernameA = encodeURIComponent($('#username').val());

var genderA = encodeURIComponent($('#gender').val());

var seekingA = encodeURIComponent($('#seeking').val());

var monthA = encodeURIComponent($('#month').val());

var dayA = encodeURIComponent($('#day').val());

var yearA = encodeURIComponent($('#year').val());

var heightA = encodeURIComponent($('#height').val());

var bodytypeA = encodeURIComponent($('#body_type').val());

var ethnicityA = encodeURIComponent($('#ethnicity').val());

var religionA = encodeURIComponent($('#religion').val());

var cityA = encodeURIComponent($('#city').val());

var stateA = encodeURIComponent($('#state').val());

var zipA = encodeURIComponent($('#zip').val());

$('#register4').fadeOut(5000);

$('#loading').show();

$.ajax

({

type: "POST",

url: "../register.php",

data: {firstnameB:firstnameA, lastnameB:lastnameA, emailB:emailA, passwordB:passwordA, usernameB:usernameA, genderB:genderA, seekingB:seekingA, monthB:monthA, day:dayA, yearB:yearA, heightB:heightA, bodytypeB:bodytypeA, ethnicityB:ethnicityA, religionB:religionA, cityB:cityA, stateB:stateA, zipB:zipA },

success: function(){ $('#loading_text').delay(5000).hide(); $('#success').fadeIn();}

});

return false;

}



}







That last statement should take the values the user inputs and send them to the register.php file via AJAX. I don't think I'm calling the function correctly. The register php works fine without Jquery and AJAX. For your reference, if you need it, I'll post a quick version of my HTML and the way my PHP decodes the variables being sent:







<input type="submit" value="Register" id="submit4"/>







Thats the last submit button that should activate the last function.





here is the begining of my php and how it decodes the variables being sent







$email_a = htmlspecialchars(trim(urldecode($_POST['emailB'])));

$user_name_a = htmlspecialchars(trim(urldecode($_POST['usernameB'])));

$pwd_unencrypted_a = htmlspecialchars(trim(urldecode($_POST['passwordB'])));

$first_name_a = htmlspecialchars(trim(urldecode($_POST['firstnameB'])));

$last_name_a = htmlspecialchars(trim(urldecode($_POST['lastnameB'])));



$month = htmlspecialchars(trim(urldecode($_POST['monthB'])));

$day = htmlspecialchars(trim(urldecode($_POST['dayB'])));

$year = htmlspecialchars(trim(urldecode($_POST['yearB'])));



$city_a = htmlspecialchars(trim(urldecode($_POST['cityB'])));

$state_a = htmlspecialchars(trim(urldecode($_POST['stateB'])));

$zip_a = htmlspecialchars(trim(urldecode($_POST['zipB'])));

$gender_a = htmlspecialchars(trim(urldecode($_POST['genderB'])));

$gender_of_interest_a = htmlspecialchars(trim(urldecode($_POST['seekingB'])));

$height_cm_a = htmlspecialchars(trim(urldecode($_POST['heightB'])));

$body_type_a = htmlspecialchars(trim(urldecode($_POST['bodytypeB'])));

$ethnicity_a = htmlspecialchars(trim(urldecode($_POST['ethnicityB'])));

$religion_a = htmlspecialchars(trim(urldecode($_POST['religionB'])));



$email = strip_tags($email_a);

$user_name = strip_tags($user_name_a);

$pwd_unencrypted = strip_tags($pwd_unencrypted_a);

$first_name = strip_tags($first_name_a);

$last_name = strip_tags($last_name_a);

$city = strip_tags($city_a);

$state = strip_tags($state_a);

$zip = strip_tags($zip_a);

$gender = strip_tags($gender_a);

$gender_of_interest = strip_tags($gender_of_interest_a);

$height_cm = strip_tags($height_cm_a);

$body_type = strip_tags($body_type_a);

$ethnicity = strip_tags($ethnicity_a);

$religion = strip_tags($religion_a);

$edu = strip_tags($edu_a);









$pwd = md5($pwd_unencrypted);

$full_name = $first_name . " " . $last_name;

$pwd_for_email = $pwd_unencrypted;



$this_day = date(j);

$this_month = date(m);

$this_year = date(Y);



$find_height_ft = mysql_query("SELECT * FROM height WHERE CM = '$height_cm'");

while($find_height = mysql_fetch_array($find_height_ft))

{

$height_ft_a = $find_height['feet_inches'];

}

$height_ft = mysql_real_escape_string($height_ft_a);



$find_zodiac = mysql_query("SELECT * FROM zodiac WHERE Month_Z = '$month' AND Day_Z = '$day'");

while($find_zodiac_array = mysql_fetch_array($find_zodiac))

{

$zodiac = $find_zodiac_array['Sign_Z'];

}









if($this_month > $month)

{

$age = $this_year - $year;

}

elseif($this_month <= $month && $this_day < $day)

{

$age = $this_year - $year - 1;

}

else

{

$age = $this_year - $year;

}



if($age >= 18)

{

//I EDITED THIS OUT TO SAVE YOU GUYS THE TIME OF READING IT basically if all above checks out that you're 18, it will insert the variables into the DB this works fine here.

}







So I'm unsure if it's the way that I'm encoding/decoding the variables or the way I'm calling the last function. I apologize for my code being bulky and written like crap.





You guys have always helped me out a bunch in the past! I greatly appreciate any help offered. -Mike


Comments

  1. Instead of assigning each value to a separate variable, you can send it all in using jQuery functions, like this:

    $('#register4').fadeOut(5000);
    $('#loading').show();
    $.ajax({
    type: "POST",
    url: "../register.php",
    data: $('#form').serialize(),
    success: function(){ $('#loading_text').delay(5000).hide(); $('#success').fadeIn();}
    });


    Notice I used $('#form').serialize(), make sure to select the form where all the inputs are located, then it will take the input values and submit them in an encoded form so you don't have to encode each one individually.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex