AJAX Request with PHP

Question

I'm working on ajax for the first time and I feel like I'm close to solving this problem but I need some help. I have my webpage file first below, that has an input field for an email address. When the user submits, the ajax doWork() function should be called which creates the request and processes the request. I have fixed the initial issue of the request being created so I'm positive that the correct object has been created based on the browser. My issue is there's no response text being submitted back and no email is created. The goal is for the user to enter the email, then an introductory email sent back to that address, when this is successful, a response string should be submitted back letting the user know that they have successfully been added to the mailing list and the submission has worked. Thanks for any help, it is greatly appreciated.

<?php include('../includes/educateHeader.php');?>
<script type="text/javascript" charset="utf-8" src="ajax.js"></script>
<div class="involve">
<h1>How to Get Involved In OEC</h1>
<span>Want to become more involved in Operation:Educate Children and don't know how? Share your email address with us, like our facebook page, or check out blog out to learn more about how you can join and help children obtain the education they deserve</span><br></br>
<form method="get">
 Email: <input type="email" name="email" id="email" required><br></br>
 <input type="submit" value="Send" onclick="doWork()">
</form>
</div>
<div id="outputResponse">
</div>
<?php include('../includes/educateFooter.php');?>

So here is the ajax.js file that creates the request and prints out the data recieved from the email.php file

function getHTTPObject() {
 if (window.ActiveXObject) {
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if (window.XMLHttpRequest) {
 return new XMLHttpRequest();
 }
 else {
 alert("Your browser does not support AJAX.");
 return null;
 }
}
function setOutput() {
 if (httpObject.readyState == 4 && httpObject.status == 200) {
 document.getElementById('outputResponse').value = httpObject.responseText;
 }
}
function doWork() {
 httpObject = getHTTPObject();
 if (httpObject != null) {
 httpObject.open("GET", "email.php?email=" + document.getElementById('email').value, true);
 httpObject.send(null);
 httpObject.onreadystatechange = setOutput;
 }
}
var httpObject = null;

Lastly here is the email.php script which should accept the ajax request and echo back whether a success has occurred or not.

<?php
if (isset($_GET['email'])) {
 $mail = trim($_GET['email']);
 $subject = 'Welcome!';
 $message = 'Thank you for joining the Operation:Educate Children email list. In the future, we will send you updates about new opportunities to become more involved in the activities that we run here at OEC and you could make a difference on children\'s futures. Thank you and best wishes!';
 mail($mail, $subject, $message);
 echo 'Success! Thank you for your interest in Operaton:Educate Children. Stay tuned for updates!';
}
?>

• lsouza: You should return false at the end of the doWork() function. Also, do you get any error of JS? Open the chrome console to look for it.
• kilkadg: I recommend you to use jquery. It is really easy.

Answer 1

JQuery makes this really easy:

$.ajax({
 url:'email.php',
 type: "POST",
 data: 'email='+$('input[name=email]').val(),
 success:function(html) {
 $('#mydiv').html(html);
 }
});

Or for GET, even easier:

$.ajax({
 url:'email.php?email='+$('input[name=email]').val(),
 success:function(html) {
 $('#mydiv').html(html);
 }
});

• MaveRick: He is NOT using jQuery so you have to suggest a pure javascript code
• aug: @MaveRick there is nothing wrong with suggesting a jQuery solution (see Meta) but yes it is important that to note that the OP is using Javascript Dave.
• MaveRick: the meta answer says "Use a framework" is not a valid answer, it is a comment. my opinion is to answer with a javascript code up to the included libraries with the script briefed in the question, suggesting a jquery can be done but it's still should be a Suggestion not a valid Answer, we should answer up to the available resource within client project libraries.
• doug65536: Avoid concatenating strings into the URL like that! What if it contains + or % or &. If it does, your code screws up. You should use the data property in the options object: data: {email: $('input[name=email]').val() } and get rid of the url bits after and including the ?.

Answer 2

First add return false; at the end of your function doWork and change onclick="doWork()" to onclick="return doWork()"

Then also change below line

document.getElementById('outputResponse').value = httpObject.responseText;

to

document.getElementById('outputResponse').innerHTML = httpObject.responseText;

Read this question too :) Setting innerHTML vs. setting value with Javascript