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!';
}
?>

Answer 1

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

Answer 2

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);
    }
});