Hello Daniweb,
I'm trying to validate form fields with php via jQuery and everything is working great, except for one thing I can't figure out. I'll try my best to explain. Here's the jQuery:
$(document).ready(function(){
$("form#reservation").submit(function(event){
event.preventDefault(); // Prevent default submission of form
});
$("input#continueReservation").click(function(event){
event.preventDefault(); // Prevent default submission of form
$(this).hide(); // Hide the continue button to avoid multiple submissions
$("input#submitting").show(); // Show the loading bar
$("table#summaryRows").html(""); // Clear the summary table so there are no duplicates from previous submissions
// Get all input values
var ticketcost = $("input#ticketcost").val();
var carrier = $("input#carrier").val();
var flight = $("input#flight").val();
var from = $("select#from").val();
var to = $("select#to").val();
var journeytype = $("select#journeytype").val();
var arrivalday = $("select#arrivalday").val();
var arrivalmonth = $("select#arrivalmonth").val();
var arrivalyear = $("select#arrivalyear").val();
var arrivalhour = $("select#arrivalhour").val();
var arrivalminutes = $("select#arrivalminutes").val();
var arrivalampm = $("select#arrivalampm").val();
var returnday = $("select#returnday").val();
var returnmonth = $("select#returnmonth").val();
var returnyear = $("select#returnyear").val();
var returnhour = $("select#returnhour").val();
var returnminutes = $("select#returnminutes").val();
var returnampm = $("select#returnampm").val();
var totalpassengers = $("select#totalpassengers").val();
var primarycontact = $("input#primarycontact").val();
var primaryphone = $("input#primaryphone").val();
var primaryemail = $("input#primaryemail").val();
$.post("../../SubmitReservations", { carrier: carrier, flight: flight, from: from, to: to, journeytype: journeytype, arrivalday: arrivalday, arrivalmonth: arrivalmonth, arrivalyear: arrivalyear, arrivalhour: arrivalhour, arrivalminutes: arrivalminutes, arrivalampm: arrivalampm, returnday: returnday, returnmonth: returnmonth, returnyear: returnyear, returnhour: returnhour, returnminutes: returnminutes, returnampm: returnampm, totalpassengers: totalpassengers, primarycontact: primarycontact, primaryphone: primaryphone, primaryemail: primaryemail },
function(data) {
if(data == "emptyfields"){
$("#emptyWarn").slideDown("slow");
$("input#continueReservation").show();
$("input#submitting").hide();
} else if (data == "valid") {
$("#emptyWarn").slideUp("slow");
$("table#tableReserve").fadeOut("slow", function(){
$("input#submittingPayment").hide();
$("table#tablePayment").fadeIn("slow");
});
}
});
and the php is simple and straight forward enough:
$carrier = clean($_POST['carrier']);
$flight = clean($_POST['flight']);
$from = clean($_POST['from']);
$to = clean($_POST['to']);
$journeytype = clean($_POST['journeytype']);
$arrivalday = clean($_POST['arrivalday']);
$arrivalmonth = clean($_POST['arrivalmonth']);
$arrivalyear = clean($_POST['arrivalyear']);
$arrivalhour = clean($_POST['arrivalhour']);
$arrivalminutes = clean($_POST['arrivalminutes']);
$arrivalampm = clean($_POST['arrivalampm']);
$returnday = clean($_POST['returnday']);
$returnmonth = clean($_POST['returnmonth']);
$returnyear = clean($_POST['returnyear']);
$returnhour = clean($_POST['returnhour']);
$returnminutes = clean($_POST['returnminutes']);
$returnampm = clean($_POST['returnampm']);
$totalpassengers = clean($_POST['totalpassengers']);
$primarycontact = clean($_POST['primarycontact']);
$primaryphone = clean($_POST['primaryphone']);
$primaryemail = clean($_POST['primaryemail']);
// Validate values
if(empty($carrier) || empty($flight) || empty($primarycontact) || empty($primaryphone) || empty($primaryemail) || $from == "0" || $to == "0" || $journeytype == "0" || $arrivalday == "0" || $arrivalmonth == "0" || $arrivalyear == "0" || $arrivalhour == "0" || $arrivalminutes == "0" || $arrivalampm == "0" || $totalpassengers == "0") {
echo "emptyfields";
exit();
} else {
echo "valid";
}
Now this works exactly as I want it to ONLY IF all the values in the drop downs are selected with a mouse click. If any of the drop downs are selected by tabbing over to them and using the keyboard up and down keys to select a value, it doesn't work. I've tried to use the .change() to alert out the values and they are returning fine, not blank. When filling out dates in online forms, I myself will just tab over to the "month" for example and just press the first alphabet of the month to go straight there, so I have to make this work but I'm at a total loss how to.
Help appreciated. Thankiez!