Question

I was having difficulty calling the necessary jQuery functions in php so I added them to the javascript, but the method I’m familiar with (the success function) prevents the php from performing anything other than the INSERT INTO and SELECT queries. How would I change this script so that it completes the php, and/or how would I combine the code so that the following can be accomplished?

Validates form (with separate rules for Men and Women)

If validation is successful: Both Genders: parent.close_field(‘notice’); (currently only works in javascript)

If Gender is Female:

• INSERT information into customer_info table
• Identifies user_id assigned to this account
• Redirects user to the next page (currently in both php & javascript)

If Gender is Male:

• Generates email notifying me of the request
• INSERT information into invite_requests table
• Echo message to Men (currently in both; Preferred method is in php)
• Close Fancybox iframe (currently only works in javascript)

I am using fancybox2 and this jQuery validation plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Javascript

var $custInfo = $("#customer_info");
$(document).ready(function () {
  var validator = $custInfo.validate({
    rules: {...},
    messages: {...},
    errorLabelContainer: "#messageBox",
    submitHandler: function () {
        $custInfo.ajaxSubmit({
            success: function () {
                if ($('input[name=gender][value=female]').is(':checked')) {
                    parent.close_field('notice');
                    window.location.href = "page1.html";
                } else if ($('input[name=gender][value=male]').is(':checked')) {
                    parent.close_field('notice');
                    parent.$.fancybox.close();
                    alert("This isn’t available yet for men, but we’ll send you an invitation as soon as it is");
                }
            }
        });
    }
  });
  $custInfo.find("input[name=gender]").change(function () {
    if ($(this).val() == "male") {
        $custInfo.submit();
    }
  });
}); 

PHP

<?php
//Start session and connection to database goes here
//Function to sanitize values received from the form goes here     
$gender = $_POST['gender'];
if ($gender==="female" ) {
    // INSERT information into customer_info table    
   $qry = "INSERT INTO customer_info(fname, lname, gender, zip, email, phone, terms, security_question, security_answer, participating_retailers, notify_new_items, notify_promotions, priority1, priority2, priority3, priority4, priority5, gift_privacy, user_name, password, Quickfill)      VALUES('$_POST[fname]','$_POST[lname]','$_POST[gender]','$_POST[zip]','$_POST[email]','$_POST[phone]','$_POST[terms]','$_POST[security_question]','$_POST[security_answer]','$_POST[participating_retailers]','$_POST[notify_new_items]','$_POST[notify_promotions]','$_POST[priority1]','$_POST[priority2]','$_POST[priority3]','$_POST[priority4]','$_POST[priority5]','$_POST[gift_privacy]','$user_name','".md5($_POST['password'])."','$_POST[Quickfill]')";
       $result = @mysql_query($qry);     
    if($result) {   

// Identifies user_id assigned to this account
          $qry="SELECT * FROM customer_info WHERE user_name='$user_name' AND password='".md5($_POST['password'])."'";
          $result=mysql_query($qry);            
    if($result) {
        if(mysql_num_rows($result) == 1) {
            session_regenerate_id();
            $member = mysql_fetch_assoc($result);
            $_SESSION['SESS_USER_ID'] = $member['user_id'];
            $_SESSION['SESS_USER_NAME'] = $member['user_name'];
            session_write_close();
// Redirects user to the next page
            header("location: page1.html");
            exit();
        }else {  //user_name failed
            header("location: login_failed.html");
            exit();  }   
    }else { die("Unable to access your account (Error Message 1)");   }    
    }else { die("Unable to access your account (Error Message 2)");   } 
  }   
// If Gender is Male    
  else { 
// Notify us of request via email    
$sendto  = "[e-mail]";$userfname = $_POST['fname'];$userlname = $_POST['lname'];$usermail = $_POST['email'];$gender = $_POST['gender'];$subject  = "Invite Request - " . ($gender) . " ";
// INSERT information into invite_requests table
   $qry = "INSERT INTO invite_requests(fname, lname, gender, zip, email, phone, terms, participating_retailers, notify_new_items, notify_promotions, priority1, priority2, priority3, priority4, priority5, gift_privacy, user_name, password, Quickfill)         VALUES('$_POST[fname]','$_POST[lname]','$_POST[gender]','$_POST[zip]','$_POST[email]','$_POST[phone]','$_POST[terms]','$_POST[participating_retailers]','$_POST[notify_new_items]','$_POST[notify_promotions]','$_POST[priority1]','$_POST[priority2]','$_POST[priority3]','$_POST[priority4]','$_POST[priority5]','$_POST[gift_privacy]','$user_name','".md5($_POST['password'])."','$_POST[Quickfill]')";
    $result = @mysql_query($qry);
 // Echo message to Men
  echo "<p><strong>Click2Fit is not yet available for men, but we'll be sure to send an invitation as soon as it is</strong></p>"; 
// Redirects user - This should be replaced with the function which closes the fancybox iframe
  header("location: home.html");
exit();     
    }
?>

Answer 1

It’s important to understand that javascript is a client-side language(meaning it runs in the user’s browser) and php is a server-side language(meaning that it runs on your server). In order to get javascript and php to interact with each other, you’re going to need to use AJAX.

since you’re already using jQuery, I would suggest you check out their AJAX api. Essentially, every time you want to call a php function from within your javascript code, you’re going to have something along the lines of this:

$.ajax({
  type: "POST", /*usually POST, but it can also be GET and some other HTTP requests in certain browsers*/
  url: "some.php", /*the url of the php which processes your data*/
  data: { name: "John", location: "Boston" } /*the data you want to pass to the server.  It will be contained in the $_POST array because of the 'type: "POST"' line above*/
}).done(function( msg ) {
  alert( "Data Saved: " + msg ); /*'msg' is what server send back to you while the contents of the function are what you do once the server finishes.  You can change the variable name, msg, as well as the function contents to suit your needs */
});