Monday, February 13, 2012

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

1 comment:

  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