Paralellos Paralellos - 3 months ago 19
Ajax Question

AJAX (NO jQuery) call to processForm.php doesn't return $_POST['email'] with responseText?

So I've got this form that I send to

processForm.php
when submitted. I haven't got around to it yet but once sent,
processForm.php
will add the email to a database that will be used to serve a mailing list for a newsletter. Also note
processForm.php
will be used for another more complex contact form later.

What I'm trying to do right now is create the response message for the user.

After the user submits the form and the response from
processForm.php
is received a
<div>
will slide down from top of screen with the message, as shown in the below
php
.

I'm using
JS
(NO jQuery) to prevent the page redirect and AJAX to make the call to
processForm.php
. I get the responseText from
processForm.php
, but the
$email
is missing.

In the
js
if I comment out
e.preventDefault();
, allowing the page to redirect,
$email
is included in the
echo $response
. But with
e.preventDefault();
engaged it isn't.

I've tried heaps of different variations of the code below, including just echoing
$email
, placing
$email
inside the
$message
variable but nothing works. The email is always excluded from the
xhr.responseText
.

Here's 2 screen shots of what's happening:

1) This image is with
e.preventDefault();
called. (i.e. using ajax)
enter image description here



2) And here we see the response when
e.preventDefault();
is commented out. (i.e. no ajax and redirected to
processForm.php
)

enter image description here



Since I still receive the echoed
$response
when making the ajax call I know
processForm.php
is building its variables and running the
if
statement. But why isn't
$email
included in the
xhr.responseText
?

The other variables,
$message
and
$response
are returned so what's going on?

Am I using
$email = $_POST['email'];
correctly? I think yes as it works with the redirect to
processForm.php.




Here's the code.
I know their are security steps like
htmlspecialchars
and
trim
that should be used, but right now I just want to get it up and running.

HTML:

<form id="mailing_list_form" action="processForm.php" method="post" accept-charset="UTF-8">
<div id="their_email" class="their_email form_field">
<label for="email">Email</label>
<input id="email" type="email" name="email" required>
</div>
<div class="state_container form_field">
<label for="state">State</label>
<select name="state">
<option value="" disabled selected></option>
<option value="NSW">NSW</option>
<option value="Queensland">Queensland</option>
<option value="SA">SA</option>
<option value="Tasmaina">Tasmaina</option>
<option value="Victoria">Victoria</option>
<option value="WA">WA</option>
</select>
</div>
<button id="form_trigger" type="submit" name="mList">Subscribe</button>
</form>


PHP:

<?php

$mailingListForm = $_POST['mList'];

$email = $_POST['email'];
$state = $_POST['state'];

if(isset($mailingListForm)){
$message = "has been added to the mailing list.";
$response = '<h2 class="form_submitted_status">Succes!<i class="form_submitted_details">'.$email." ".$message.'</i></h2>';
echo $response;
}
?>


JS:

formTriggerClick();
function formTriggerClick(){
var formTrigger = document.getElementById("form_trigger");

formTrigger.addEventListener("click", function(event){
event.preventDefault();

if(formTrigger.hasAttribute("data-validation")){
processForm();

function processForm(){
getResponse(function(result){
var resultText = result;
var response = document.getElementsByClassName("form_submitted")[0];
response.innerHTML = resultText;
response.setAttribute("data-show", "response");
});

}// processForm() -- END --//

function getResponse(callback){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if(xhr.status === 200) {
callback(xhr.responseText);
}
}
};
xhr.open("POST", "processForm.php");
xhr.send();
}//getResponse() -- END --//

}// if formTrigger has data-validation -- END --//
});

}//formTriggerClick() // -- END --//

ASK ASK
Answer

I'm surprised that your form is submmiting. I think you problem is this:

You are using form_trigger in the function formTriggerClick in line 1

And as far as I know you don't have element with id form_trigger instead you have trigger

You full working solution will be like this:

formTriggerClick();
function formTriggerClick(){
    var formTrigger = document.getElementById("trigger");
    ...

Edit 1

Next problem you never send the value to the proccessForm.php. Here how you do something like this:

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("field1Name=value1&field2Name=value2&...");

See this for more details about AJAX http://www.w3schools.com/ajax/default.asp

Edit 2

And you should do:

var xhr = new XMLHttpRequest();

Edit 3 Here how you send the datas(However works for IE 10 and above):

var form = document.getElementById("formId");
var data = new FormData(form);
xrh.send(data);

For IE < 10:

var emailValue= document.getElementById("emailFieldId").value;
....
var data="email="+emailValue+"...so on";
xhr.send(data);

Here's a good example.

You could always use some functions. And that's when jQuery is very handy.

Comments