By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,844 Members | 1,895 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,844 IT Pros & Developers. It's quick & easy.

AJAX contact form

P: 9
Ok so I found an ajax contact form script but i can't get the b****** to work. I made a bunch of alterations to it and it didn't work so i replaced everything with the original and it still didn't work...dunno why, but anyhow. The form appears after a delay on the page in a hidden DIV. The original form just had name, email and message, but i have to add a few questions to it so i did and i also added some code from another script i found to alter the body text. I probably screwed it all up but i'm no expert so please help.

All the code is in a single php file that's called as an include in the actual page. It displays just fine but when i go to submit it just says "please wait" and never sends an email.

Expand|Select|Wrap|Line Numbers
  1. <?
  2. if(!isset($rnd) || !isset($name) || !isset($email) || !isset($realtor) || !isset($when) || !isset($selling)) {
  3.     showform();
  4. } else {
  5.     processform();
  6. }
  7.  
  8. $Body = "";
  9. $Body .= "Name: ";
  10. $Body .= $Name;
  11. $Body .= "\n";
  12. $Body .= "Email: ";
  13. $Body .= $email;
  14. $Body .= "\n";
  15. $Body .= "Working with a Realtor: ";
  16. $Body .= $Realtor;
  17. $Body .= "\n";
  18. $Body .= "How soon they are looking to buy or rent: ";
  19. $Body .= $When;
  20. $Body .= "\n";
  21. $Body .= "Selling their home: ";
  22. $Body .= $Selling;
  23. $Body .= "\n";
  24.  
  25. function processform(){
  26.     global $name, $email, $realtor, $when, $selling, $Body;
  27.  
  28.     $email_to1 = "shadedjg@hotmail.com"; // enter your email here
  29.     $email_from1 = $mail;
  30.     $email_to2 = $mail;
  31.     $email_from2 = $email_to1;
  32.     $email_subject = "Contact Form: ".stripslashes($subject);
  33.     $email_message = "Please find below a message submitted by '".stripslashes($name);
  34.     $email_message .="' on ".date("d/m/Y")." at ".date("H:i")."nn";
  35.     $email_message .="--------- START OF SUBMITTED MESSAGE ---------nn";
  36.     $email_message .= stripslashes($Body);
  37.     $email_message .="nn--------- END OF SUBMITTED MESSAGE ---------nn";
  38.  
  39.     $confirmation_subject = "Thank you for your message";
  40.     $confirmation = "This is to confirm we have received your message....";
  41.  
  42.     // SEND EMAIL TO email_to2 - confirmation
  43.     $headers = 'From: '.$email_from2."rn" .
  44.    'Reply-To: '.$email_from2."rn" .
  45.    'X-Mailer: PHP/' . phpversion();
  46.  
  47.     mail($email_to2, $email_subject, $confirmation, $headers);
  48.  
  49.     // SEND EMAIL TO email_to1 - message to you!!
  50.     $headers = 'From: '.$email_from1."rn" .
  51.    'Reply-To: '.$email_from1."rn" .
  52.    'X-Mailer: PHP/' . phpversion();
  53.  
  54.     mail($email_to1, $email_subject, $email_message, $headers);
  55.  
  56.     echo "Thank You.";
  57.     die();
  58. } // end processform()
  59.  
  60. function showform() {
  61. ?>
  62. <STYLE type="text/css">
  63. div.row {
  64.   clear:both;
  65.   }
  66. div.row span.label {
  67.   float: left;
  68.   width: 60px;
  69.   text-align: right;
  70.   }
  71. div.row span.formw {
  72.   float: right;
  73.   width: 220px;
  74.   text-align: left;
  75.   }
  76. div.row span.left {
  77.   float: left;
  78.   text-align: left;
  79.   font-weight: bold;
  80.   color: #fff;
  81.   width: 49%;
  82.   }
  83. div.row span.right {
  84.   float: right;
  85.   text-align: right;
  86.   font-weight: bold;
  87.   color: #fff;
  88.   width: 49%;
  89.   }
  90. div.row span.submit{
  91.   width:280px;
  92.   text-align:center;
  93. }
  94. #form{
  95.     width: 300px;
  96.     height: 500px;
  97.     background-color: #f6f6f6;
  98.     border: 1px dotted #666;
  99.     padding: 2px;
  100.     margin: 0px auto;
  101.     position: relative;
  102. }
  103. #confirmation{
  104.     width: 300px;
  105.     height:220px;
  106.     background-color: #f6f6f6;
  107.     border: 1px dotted #666;
  108.     padding: 2px;
  109.     margin: 0px auto;
  110.     text-align: center;
  111.   font-weight: bold;
  112. }
  113. </STYLE>
  114. <script type="text/javascript">
  115. <!--
  116. var http = createRequestObject();
  117. var areal = Math.random() + "";
  118. var real = areal.substring(2,6);
  119.  
  120. function createRequestObject() {
  121.     var xmlhttp;
  122.     try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }
  123.   catch(e) {
  124.     try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  125.     catch(f) { xmlhttp=null; }
  126.   }
  127.   if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {
  128.       xmlhttp=new XMLHttpRequest();
  129.   }
  130.     return  xmlhttp;
  131. }
  132.  
  133. function sendRequest() {
  134.     var rnd = Math.random();
  135.     var name = escape(document.getElementById("name").value);
  136.     var email = escape(document.getElementById("email").value);
  137.     var realtor = escape(document.getElementById("realtor").value);
  138.     var when = escape(document.getElementById("when").value);
  139.     var selling = escape(document.getElementById("selling").value);
  140.  
  141.     try{
  142.     http.open('POST',  'ajax_contact.php');
  143.     http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  144.     http.onreadystatechange = handleResponse;
  145.         http.send('name='+name+'&email='+email+'&realtor='+realtor+'&when='+when+'&selling='+selling+'&rnd='+rnd);
  146.     }
  147.     catch(e){}
  148.     finally{}
  149. }
  150.  
  151. function check_values() {
  152.     var valid = document.getElementById("valid").value;
  153.     if(real !== valid) {
  154.         alert("Anti-Bot check failed.....nPlease enter the 4 digits as they appear.");
  155.         return false;
  156.     }
  157.  
  158.     var name = document.getElementById("name").value;
  159.     var email = document.getElementById("email").value;
  160.     var realtor = document.getElementById("realtor").value;
  161.     var when = document.getElementById("when").value;
  162.     var selling = document.getElementById("selling").value;
  163.     if(trim(name) == "" ||
  164.         trim(email) == "" ||
  165.         trim(realtor) == "" ||
  166.         trim(when) == "" ||
  167.         trim(selling) == "") {
  168.             alert("Please complete all fields");
  169.     } else {
  170.         if(isEmail(email)) {
  171.             document.getElementById("submit").disabled=true;
  172.             document.getElementById("submit").value='Please Wait..';
  173.             sendRequest();
  174.         } else {
  175.             alert("Email appears to be invalid.nPlease check.");
  176.             document.getElementById("email").focus();
  177.             document.getElementById("email").select();
  178.         }
  179.     }
  180. }
  181.  
  182. function handleResponse() {
  183.     try{
  184.     if((http.readyState == 4)&&(http.status == 200)){
  185.         var response = http.responseText;
  186.       document.getElementById("confirmation").innerHTML = response;
  187.       document.getElementById("confirmation").style.display ="";
  188.       document.getElementById("form").style.display = "none";
  189.         }
  190.   }
  191.     catch(e){}
  192.     finally{}
  193. }
  194.  
  195. function isUndefined(a) {
  196.    return typeof a == 'undefined';
  197. }
  198.  
  199. function trim(a) {
  200.     return a.replace(/^s*(S*(s+S+)*)s*$/, "$1");
  201. }
  202.  
  203. function isEmail(a) {
  204.    return (a.indexOf(".") > 0) && (a.indexOf("@") > 0);
  205. }
  206.  
  207. function botCheckInfo() {
  208.     alert("To prevent automatic programs (bots)nfrom submitting spam through this form,nwe have added a simple validationncheck to the form. You must enter nthese 4 digits in the box provided innorder to submit the form.");
  209. }
  210.  // -->
  211.  </script>
  212.  
  213. <?
  214. } // end showform()
  215. ?>
  216.     <div id="form">
  217. <form>
  218. <div class="row"><span class="label">Name:</span>
  219.     <span class="formw"><input type="text" id="name" size="30" /></span></div>
  220. <div class="row"><span class="label">Email:</span>
  221.     <span class="formw"><input type="text" id="email" size="30" /></span></div>
  222. <div class="row"><span class="label">Are your currently working with a Realtor?:</span>
  223.     <span class="formw"><select id="realtor">
  224.           <option value="Yes">Yes</option>
  225.           <option value="No">No</option>
  226.         </select></span></div>
  227. <div class="row"><span class="label">How soon are you looking to buy, sell or rent?:</span>
  228.     <span class="formw"><select id="when">
  229.           <option value="Now">Now</option>
  230.           <option value="Within a few months">Within a few months</option>
  231.           <option value="Within 6 months">Within 6 months</option>
  232.           <option value="Within a year">Within a year</option>
  233.           <option value="Not sure">Not sure</option>
  234.         </select></span></div>
  235. <div class="row"><span class="label">Do you have to sell your home?:</span>
  236.     <span class="formw"><select id="selling">
  237.           <option value="Yes">Yes</option>
  238.           <option value="No">No</option>
  239.         </select></span></div>
  240. <div class="row"><a href="javascript:botCheckInfo()">Anti-bot check</a>. Enter Digits '<b><script language="javascript">document.write(real)</script></b>' below:</div>
  241. <div class="row"><input type="text" id="valid" size="15" /></div>
  242. <div class="row">&nbsp;</div>
  243. <div class="row">
  244.     <input type="button" value="Submit" id="submit" onClick="return check_values();"></div>
  245. <div id="confirmation" style="display:none"></span></div>
  246. </form>
  247.  
  248. </div>
Dec 8 '07 #1
Share this Question
Share on Google+
12 Replies


acoder
Expert Mod 15k+
P: 16,027
What's the response from the server?

Do you get any errors?
Dec 10 '07 #2

P: 9
Nope. No response. It does nothing.
Dec 11 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Can you get the PHP page working as expected without using Ajax?
Dec 12 '07 #4

P: 9
The page works fine up until the form is submitted. I need the form to submit and close the div. I was told to use Ajax because it's apparently the only way to keep the user on the same page.

I would be fine with possibly having the form submit and open in a new window with confirmation. I don't care what happens once it's submitted as long as the div closes and disappears. Right now the form does nothing for some reason and the div stays there.

Is there any way to have the form submit, close the div and open in a new window perhaps?
Dec 13 '07 #5

acoder
Expert Mod 15k+
P: 16,027
I meant the PHP page that you're calling via Ajax, ajax_contact.php.

It seems, though, that you're calling the same page. I would suggest that you create a new page which only deals with the response and returns a result.
Dec 14 '07 #6

P: 9
The script is designed to just be an include. I tested the original on another server and it worked so i'm guessing the server my client is on is a piece of crap. So I know the script works and i've done a ton of combing and going through it. I've got it to almost work. I know it's reading the form values correctly because the validation script works. And the form disappears when I hit submit, it's just not actually sending the email now for some reason. Somewhere along the lines in adding more variables it's screwed it up.

Here's the javascript:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. var http = createRequestObject();
  4. var areal = Math.random() + "";
  5. var real = areal.substring(2,6);
  6.  
  7. function createRequestObject() {
  8.     var xmlhttp;
  9.     try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }
  10.   catch(e) {
  11.     try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  12.     catch(f) { xmlhttp=null; }
  13.   }
  14.   if(!xmlhttp&&typeof XMLHttpRequest!="undefined") {
  15.       xmlhttp=new XMLHttpRequest();
  16.   }
  17.     return  xmlhttp;
  18. }
  19.  
  20. function sendRequest() {
  21.     var rnd = Math.random();
  22.     var name = escape(document.getElementById("name").value);
  23.     var email = escape(document.getElementById("email").value);
  24.     var realtor = escape(document.getElementById("realtor").value);
  25.     var when = escape(document.getElementById("when").value);
  26.     var selling = escape(document.getElementById("selling").value);
  27.  
  28.     try{
  29.     http.open('POST',  'ajax_contact.php');
  30.     http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  31.     http.onreadystatechange = handleResponse;
  32.         http.send('name='+name+'&email='+email+'&realtor='+realtor+'&when='+when+'$selling='+selling+'&rnd='+rnd);
  33.     }
  34.     catch(e){}
  35.     finally{}
  36. }
  37.  
  38. function check_values() {
  39.     var valid = document.getElementById("valid").value;
  40.     if(real !== valid) {
  41.         alert("Ant-Bot check failed.....nPlease enter the 4 digits as they appear.");
  42.         return false;
  43.     }
  44.  
  45.     var name = document.getElementById("name").value;
  46.     var email = document.getElementById("email").value;
  47.     var realtor = document.getElementById("realtor").value;
  48.     var when = document.getElementById("when").value;
  49.     var selling = document.getElementById("selling").value;
  50.     if(trim(name) == "" ||
  51.         trim(email) == "" ||
  52.         trim(realtor) == "" ||
  53.         trim(when) == "" ||
  54.         trim(selling) == "") {
  55.             alert("Please complete all fields");
  56.     } else {
  57.         if(isEmail(email)) {
  58.             document.getElementById("submit").disabled=true;
  59.             document.getElementById("submit").value='Please Wait..';
  60.             sendRequest();
  61.         } else {
  62.             alert("Email appears to be invalid.nPlease check.");
  63.             document.getElementById("email").focus();
  64.             document.getElementById("email").select();
  65.         }
  66.     }
  67. }
  68.  
  69. function handleResponse() {
  70.     try{
  71.     if((http.readyState == 4)&&(http.status == 200)){
  72.         var response = http.responseText;
  73.       document.getElementById("confirmation").innerHTML = response;
  74.       document.getElementById("confirmation").style.display ="";
  75.       document.getElementById("form").style.display = "none";
  76.         }
  77.   }
  78.     catch(e){}
  79.     finally{}
  80. }
  81.  
  82. function isUndefined(a) {
  83.    return typeof a == 'undefined';
  84. }
  85.  
  86. function trim(a) {
  87.     return a.replace(/^s*(S*(s+S+)*)s*$/, "$1");
  88. }
  89.  
  90. function isEmail(a) {
  91.    return (a.indexOf(".") > 0) && (a.indexOf("@") > 0);
  92. }
  93.  
  94. function botCheckInfo() {
  95.     alert("To prevent automatic programs (bots)nfrom submitting spam through this form,nwe have added a simple validationncheck to the form. You must enter nthese 4 digits in the box provided innorder to submit the form.");
  96. }
  97.  // -->
  98.  </script>
I don't get it. It gets through all the validation, but for some reason it won't actually send the email. I'm so close I can taste it :oP

The php:
Expand|Select|Wrap|Line Numbers
  1. <?
  2. if(!isset($rnd) || !isset($name) || !isset($email) || !isset($realtor) || !isset($when) || !isset($selling)) {
  3.     showform();
  4. } else {
  5.     processform();
  6. }
  7.  
  8. function processform(){
  9.     global $name, $email, $realtor, $when, $selling;
  10.  
  11.     $email_to1 = "shadedjg@hotmail.com"; // enter your email here
  12.     $email_from1 = $mail;
  13.     $email_to2 = $mail;
  14.     $email_from2 = $email_to1;
  15.     $email_subject = "Website Submission";
  16.     $email_message =" on ".date("d/m/Y")." at ".date("H:i")."<br><br>";
  17.     $email_message .= "Name:".stripslashes($name);
  18.     $email_message .="Using a Realtor".stripslashes($realtor)."<br>";
  19.     $email_message .="When buying, selling or renting:".stripslashes($when)."<br>";
  20.     $email_message .="Selling:".stripslashes($selling);
  21.  
  22.     $confirmation_subject = "Thank you for your message";
  23.     $confirmation = "This is to confirm we have received your message....";
  24.  
  25.     // SEND EMAIL TO email_to2 - confirmation
  26.     $headers = 'From: '.$email_from2."rn" .
  27.    'Reply-To: '.$email_from2."rn" .
  28.    'X-Mailer: PHP/' . phpversion();
  29.  
  30.     mail($email_to2, $email_subject, $confirmation, $headers);
  31.  
  32.     // SEND EMAIL TO email_to1 - message to you!!
  33.     $headers = 'From: '.$email_from1."rn" .
  34.    'Reply-To: '.$email_from1."rn" .
  35.    'X-Mailer: PHP/' . phpversion();
  36.  
  37.     mail($email_to1, $email_subject, $email_message, $headers);
  38.  
  39.     echo "Thank You.";
  40.     die();
  41. } // end processform()
  42.  
  43. function showform() {
  44. ?>
Any ideas?
Dec 17 '07 #7

acoder
Expert Mod 15k+
P: 16,027
You're closing showForm() too early. It should include the form within it.
Dec 17 '07 #8

P: 9
Normally I would look into your suggestion but that can't be it. No offense of course, because you know more than i do, but i didn't change any of the code except for the variables. I checked the original and it works fine so it can't be a problem like that or the original wouldn't even work to begin with. Or am i completely missing something??
Dec 18 '07 #9

acoder
Expert Mod 15k+
P: 16,027
Normally I would look into your suggestion but that can't be it. No offense of course, because you know more than i do, but i didn't change any of the code except for the variables. I checked the original and it works fine so it can't be a problem like that or the original wouldn't even work to begin with. Or am i completely missing something??
Should the form display when the form is processed?

In your original code, you check at the top whether to process the form or show the form. showForm() finishes on line 214 after which the actual form appears. This means that whether you're processing the form or showing the form, the form will display.

To eliminate all possibilities, test your application without Ajax on the server that it's going to be deployed on, so that you know that it's not a problem with the PHP.
Dec 18 '07 #10

P: 9
I finally figured it out. It was ONE character. The line where the javasript sends the variables to the php portion had a '$' instead of '&' on one of them. Prime example of why i'm not a coder :oP

Thanks for all your help :o) Much appreciated.
Dec 23 '07 #11

gits
Expert Mod 5K+
P: 5,235
*lol* ... nope ... believe me ... such errors are common ... lasty i had such a problem at work ... a colleague searched for a bug and we did together ... it lasts us two hours to find out a mistyped check if (val1 = val2) as an assignment ... we overlooked it every time ... glad to hear you found the error ;)

kind regards
Dec 23 '07 #12

acoder
Expert Mod 15k+
P: 16,027
I finally figured it out. It was ONE character. The line where the javasript sends the variables to the php portion had a '$' instead of '&' on one of them.
In your code in post #1, there's no $, but it must've accidentally been added by the time you got to post #7.
Prime example of why i'm not a coder :oP

Thanks for all your help :o) Much appreciated.
As gits said, it doesn't mean you're not a coder. Glad you got it working and good luck with your project.
Dec 23 '07 #13

Post your reply

Sign in to post your reply or Sign up for a free account.