I have been trying recently to use AJAX in a form I posses in order to prevent the page from reloading. I learned AJAX through thenewboston's videos and I've tried to match it to my form.
<label for="f_name">Name:</label>
<input type="text" name="f_name" id="f_name" />
<label for="f_email">E-Mail:</label>
<input type="text" name="f_email" id="f_email" />
<label for="f_subj">Subject:</label>
<input type="text" name="f_subj" id="f_subj" /><br />
<div id="status"></div>
<button id="b_send" onClick="process()">Send</button>
function process() {
var name = encodeURIComponent(document.getElementById("f_name").value);
var email = encodeURIComponent(document.getElementById("f_email").value);
var sbj = encodeURIComponent(document.getElementById("f_subj").value);
if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
xmlHttp.open("POST", "send.php", true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send("name="+name+"&email="+email+"&subj="+sbj);
} else {
setTimeout('process()', 1000);
}
}
function handleServerResponse() {
if (xmlHttp.readyState == 4) { // AJAX is ready!
if (xmlHttp.status == 200) { // 200 = Comms went OK!
var xmlResponse = xmlHttp.responseXML;
var xmlDocumentElement = xmlResponse.documentElement;
var message = xmlDocumentElement.firstChild.data;
document.getElementById("status").innerHTML = '<span style="color:blue">' + message + '</span>';
} else {
alert('Something went wrong!');
}
}
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
$name = $_POST['name'];
$email = $_POST['email'];
$sbj = $_POST['subj'];
$src = 'BETA';
$to = "someone@somewhere.com";
$subject = "CONTACT | From: " . $name . " , " . $email . " | '" . $sbj . "' | " . $src . "";
$body = "
<html><body>
<h4>From: ".$name." , ".$email."</h4>
<h4>Subject: ".$sbj."</h4>
<h5>Source: BETA</h5>
</body></html>";
$headers = "From: someone@somewhere.com
";
$headers .= "Reply-To:
";
$headers .= "CC:
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1
";
$response = 'Error!';
if (mail($to, $subject, $body, $headers)) {
$response = 'Sent!';
} else {
$response = 'Error 202!';
}
echo '<response>';
echo strip_tags($response);
echo '</response>';
exit(); // I had to use exit() due to my hosting adding up code after every PHP page.
?>
After I click on the button, it shows me the PHP page with the following saying:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
and the XML code below it:
<response>Sent!</response>
So what now?
The message is a warning. An XML document is a data structure but does not contain any presentation/style information internally. Normally an XML document is used in inter-application communication or as a pure data structure that is then used with additional presentation/style information to display to users.
You are outputing your data in xml format using following lines,
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
If you are trying to get the response from your ajax call, remove xml header and simply echo proper response or use JSON to get your data.
or if you want to display xml file without the warning, you can attach a stylesheet to your xml document like this:
<?xml-stylesheet type="text/css" href="your_stylesheet.css"?>
XML-Stylesheet Reference: http://www.w3.org/TR/xml-stylesheet/