AJAX

Ajax Contact Form Help Please

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2008

Posts: 2

Reputation: Melissa34 is an unknown quantity at this point

Solved Threads: 0

Melissa34

Offline

Newbie Poster

Ajax Contact Form Help Please

Sep 14th, 2008

Hi
I've been following a tutorial that describes 'Hijax' from the book Bulletproof Ajax and it is not that clear exactly where the sections of code go...can anyone please help with this and troubleshoot??
(I am a complete novice with this and it's taken me ages to type it all out!!) Help appreciated,
Many thanks
Melissa

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ajax.js"></script>
<title>Contact Us</title>
</head>
 
<body>
<h1>Contact Us</h1>
<div id="container">
<?php include "formlogic.php";?>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ajax.js"></script>
<title>Contact Us</title>
</head>

<body>
<h1>Contact Us</h1>
<div id="container">
<?php include "formlogic.php";?>
</div>
</body>
</html>

Formlogic.php is....

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<form method="post" id ="contactform" action="">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10">
</textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" />
</p>
</form>
<form method="post" id ="contactform" action="">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10">
</textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" />
</p>
</form>

And ajax.js is...

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function sendData(data) {
 var request = getHTTPObject();
 if (request) {
  request.onreadystatechange = function() {
  parseResponse(request);
  };
  request.open( "POST", "formlogic.php", true);
  request.setRequestHeader("Content-Type",
  "application/x-www-form-urlencoded");
  request.send(data);
  return true;
  } else {
  return false;
  }
 }
 window.onload = prepareForm;
 function prepareFrom() {
 if(!document.getElementById) {
 return;
 }
 if(!document.getElementById("contactform")) {
 return;
 }
 document.getElementById("contactform").onsubmit =
 function() {
 var data=" ";
 for(var i=0; i<this.elements.length; i++) {
 data+= this.elements[i].name;
 data+= "=";
 data+= escape(this.elements[i].value);
 data+= "&";
 }
 return !sendData(data);
 };
 }
 function parseResponse(request) {
 if (request.readyState == 4) {
 if (request.status == 200 || request.status == 304) {
 var container = document.getElementById("container");
 container.innerHTML = request.responseText;
 prepareForm();
 }
 }
 }
function sendData(data) {
 var request = getHTTPObject();
 if (request) {
  request.onreadystatechange = function() {
  parseResponse(request);
  };
  request.open( "POST", "formlogic.php", true);
  request.setRequestHeader("Content-Type",
  "application/x-www-form-urlencoded");
  request.send(data);
  return true;
  } else {
  return false;
  }
 }
 window.onload = prepareForm;
 function prepareFrom() {
 if(!document.getElementById) {
 return;
 }
 if(!document.getElementById("contactform")) {
 return;
 }
 document.getElementById("contactform").onsubmit =
 function() {
 var data=" ";
 for(var i=0; i<this.elements.length; i++) {
 data+= this.elements[i].name;
 data+= "=";
 data+= escape(this.elements[i].value);
 data+= "&";
 }
 return !sendData(data);
 };
 }
 function parseResponse(request) {
 if (request.readyState == 4) {
 if (request.status == 200 || request.status == 304) {
 var container = document.getElementById("container");
 container.innerHTML = request.responseText;
 prepareForm();
 }
 }
 }

•

Join Date: May 2007

Posts: 454

Reputation: Atli is on a distinguished road

Solved Threads: 56

Atli

Offline

Posting Pro in Training

Re: Ajax Contact Form Help Please

Sep 14th, 2008

Why do you have AJAX send the data to the formlogic.php script?

You need to have a script that can process the data you are sending, and have AJAX send the data there.

•

Join Date: Sep 2008

Posts: 2

Reputation: Melissa34 is an unknown quantity at this point

Solved Threads: 0

Melissa34

Offline

Newbie Poster

Re: Ajax Contact Form Help Please

Sep 16th, 2008

Hi
thanks for the response...eventually I found the code online http://www.bulletproofajax.com/code/

The chapter in the book was called Hijax - using javascript,php, html....I'm not sure what exactly the javascript does, seems to process the form.

Thanks

Mel