Javascript not passing variable to PHP with HTML form

Question

I have contact form, that uses Javascript and PHP.

My problem is that the javascript does not pass its variables to the PHP script. I have discovered the following:

The variables does get set in the javascript, as it passes the variable check inside the javascript and by using alerts showing the variable.

As it travels to the PHP script, the variables are no longer there. I have tried to comment out the check in the PHP script, then it succesfully send a mail, but the mail was empty apart from the static content from the PHP script.

I have tried various different methods, including passing the variables directly from the http.send() function.

Here is the relevant code (These are all 3 different files on the web server):

HTML:

div class="contact_form">
            <h4>Get in touch</h4>
            <form method="post">
                <input type="text" name="Name" id="name" value="Name" onfocus="this.value = this.value=='Name'?'':this.value;" onblur="this.value = this.value==''?'Name':this.value;" />
                <input type="text" name="Email" id="email" value="Email" onfocus="this.value = this.value=='Email'?'':this.value;" onblur="this.value = this.value==''?'Email':this.value;" />
                <input type="text" value="Subject (Hosting, Requests, Appeal, Report, etc.)" id="subject" onfocus="this.value = this.value=='Subject (Hosting, Requests, Appeal, Report, etc.)'?'':this.value;" onblur="this.value = this.value==''?'Subject (Hosting, Requests, Appeal, Report, etc.)':this.value;" />
                <textarea name="Message" id="body" onfocus="this.value = this.value=='Message'?'':this.value;" onblur="this.value = this.value==''?'Message':this.value;">Message</textarea>
                <input type="submit" name="submit" id="submit" value="send" class="submit-button" onClick="return check_values();" />
            </form>
            <div id="confirmation" style="display:none; position: relative; z-index: 600; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 16px; color: #4e4e4e;"></div>
        </div> <!-- end .contact_form -->

Javascript:

var http = createRequestObject();
var areal = Math.random() + "";
var real = areal.substring(2,6);

function createRequestObject() {
    var xmlhttp;
    try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }
  catch(e) {
    try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    catch(f) { xmlhttp=null; }
  }
  if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {
    xmlhttp=new XMLHttpRequest();
  }
    return  xmlhttp;
}

function sendRequest() {
    var rnd = Math.random();
    var name = escape(document.getElementById("name").value);
    var email = escape(document.getElementById("email").value);
    var subject = escape(document.getElementById("subject").value);
    var body = escape(document.getElementById("body").value);

    try{
        http.open('POST','pform.php');
        http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        http.send('name='+name+'&email='+email+'&subject='+subject+'&body='+body+'&rnd='+rnd);
        http.onreadystatechange = handleResponse;
    }
    catch(e){}
    finally{}
}

function check_values() {
    var valid = '';

    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var subject = document.getElementById("subject").value;
    var body = document.getElementById("body").value;
    if(trim(name) == "" ||
        trim(email) == "" ||
        trim(subject) == "" ||
        trim(body) == "") {
            alert("Please complete all fields");
    } else {
        if(isEmail(email)) {
            document.getElementById("submit").disabled=true;
            document.getElementById("submit").value='Please Wait..';
            sendRequest();
        } else {
            alert("Email appears to be invalid\nPlease check and try again");
            document.getElementById("email").focus();
            document.getElementById("email").select();
        }
    }
}

function handleResponse() {
    try{
    if((http.readyState == 4)&&(http.status == 200)){
        var response = http.responseText;
      document.getElementById("confirmation").innerHTML = response;
      document.getElementById("confirmation").style.display ="";
        }
  }
    catch(e){}
    finally{}
}

function isUndefined(a) {
   return typeof a == 'undefined';
}

function trim(a) {
    return a.replace(/^s*(S*(s+S+)*)s*$/, "$1");
}

function isEmail(a) {
   return (a.indexOf(".") > 0) && (a.indexOf("@") > 0);
}

PHP:

<?php
error_reporting(0);

$page_title = "Contact Us Form";
$email_it_to = "email@example.com";
$error_message = "Please complete the form first";
$confirmation = "Thank you, your message has been successfully sent.";

if(!isset($rnd) || !isset($name) || !isset($email) || !isset($subject) || !isset($body)) {
    echo $error_message;
    die();
}

    $email_from = $email;
    $email_subject = "Contact Form: ".stripslashes($subject);
    $email_message = "Please find below a message submitted by '".stripslashes($name);
    $email_message .="' on ".date("d/m/Y")." at ".date("H:i")."\n\n";
    $email_message .= stripslashes($body);

    $headers = 'From: '.$email_from."\r\n" .
   'Reply-To: '.$email_from."\r\n" .
   'X-Mailer: PHP/' . phpversion();

    mail($email_it_to, $email_subject, $email_message, $headers);

    echo "<b>$confirmation</b>";
    die();
?>

Answer 1

You're not using the $_POST variable to grab anything - you're using unset variables.

Change all your calls to use $_POST :

if(!isset($rnd) || !isset($name) || !isset($email) || !isset($subject) || !isset($body))

Change to:

if(!isset($_POST['rnd']) || !isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['subject']) || !isset($_POST['body']))

And you'll need to change it anywhere else you're using the undefined variables.

Alternatively, you could just do:

$rnd = mysql_real_escape_string($_POST['rnd']);
$name = mysql_real_escape_string($_POST['name']);
... and so on

Answer 2

Try this:

try{
    http.open('POST','pform.php?name='+name+'&email='+email+'&subject='+subject+'&body='+body+'&rnd='+rnd);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.onreadystatechange = handleResponse;
}

Answer 3

Use $_POST to access POST variables:

if (!isset($_POST["my_post_variable"]) {
 die('No post arguments passed.');
} 

Answer 4

Its because Javascript is client-side scripting language, and PHP is a server side. So cannot directly access variables of javascript through PHP.

You can access the values posted by the HTML form as

<?php
$var_name = $_POST['name_of_the_variable_to_access'];
//then access these variables in your code.
?>

You can also try this one line code at the starting of your php script, but you need to make sure that the variable value is not re-assigned in your php code.

<?
extract($_POST);
//your code here.
?>

Using above code you will get the HTML Page values in variables - $Name, $Email, $Message.

And ya, you need to give name to Message field. It would be a good practice to write name in lower case only