Solved

Ajax Email Form Issue

Posted on 2011-09-28
20
394 Views
Last Modified: 2012-05-12
Hi Experts,

Folder Structure - bold is main folders / Italic is sub folders / Underline is files
I have also selected the files to be attached but I will give the structure just in case.

PublicHTML
-resources
--css
----master.css
----reset.css
--images
---contact
----close.png
----envelope.png
----submit.png
--jquery
---jquery.easing.1.3.js
--js
---contact.js
-index.php
-send.php

I have got the following Ajax form that I want to use to email me from a website, but have a problem with the following:

1. When hitting the send button after completing everything correctly it does not send the mail. It seems like it is getting stuck somewhere, but I cannot figure out why.
2. When you hit Send button and one of the required fields are empty it does display the error correctly but the "Send" text disappears from the button.
3. I would also like to incorporate a reset button to reset all the fields
4. And when the focus is removed from one field the value text are not replaced with the original value text, which is also something I would like you to help with.

Here are the pages:

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>AJAX Contact Form</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link rel="stylesheet" type="text/css" href="resources/css/reset.css" />
<link rel="stylesheet" type="text/css" href="resources/css/master.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/contact.js"></script>

</head>

<body>

<div id="container">

<h1>This is a web page</h1>

<p>Click the Contat Us link below:</p>

<p>A <a class="modal" href="#">Contact Us</a>.</p>

</div><!--end container-->

<!--contact form-->

<div id="contact">
	<div id="close">Close</div>

	<div id="contact_header">Contact</div>
	<p class="success">Thanks! Your message has been sent.</p>

  <form action="send.php" method="post" name="contactForm" id="contactForm">
  <p><input name="name" id="name" type="text" size="30" value="Your Name" /></p>
  <p><input name="surename" id="surename" type="text" size="30" value="Your Surename" /></p>
  <p><input name="cell" id="cell" type="text" size="30" value="Cell should only contain numbers 0821234567" /></p>
  <p><input name="workphone" id="workphone" type="text" size="30" value="Work Phone" /></p>
  <p><input name="fax" id="fax" type="text" size="30" value="Fax" /></p>
  <p><input name="email" id="email" type="text" size="30" value="Your Email Address" /></p>
  <p>To OR Tambo Airport <input name="toorfromOR" type="radio" value="To OR Tambo Airport" /> From OR Tambo Airport <input name="toorfromOR" type="radio" value="From OR Tambo Airport" /></p>
  <p>To the following Address <input name="toorfromAdd" type="radio" value="to" /> From the following Address <input name="toorfromAdd" type="radio" value="from" /></p>
  <p>
    <textarea name="fulladdress" id="fulladdress" rows="5" cols="40">Enter your Full Address...123 Example str, Suburb, City, Code: 1565</textarea></p>
  <p><textarea name="comment" id="comment" rows="5" cols="40">Please enter the date that you need to be transported as well as any additional info...</textarea></p>
  <p><input type="submit" id="submit" name="submit" value="Send" /></p>
 </form>
</div>

<div id="mask"></div>

<!--end contact form-->

</body>
</html>

Open in new window


contact.js
$(function() {



	// load the modal window

	$('a.modal').click(function(){



		// scroll to top

		$('html, body').animate({scrollTop:0}, 'fast');



		// before showing the modal window, reset the form incase of previous use.

		$('.success, .error').hide();

		$('form#contactForm').show();

		

		// Reset all the default values in the form fields

		$('#name').val('Your name');

		$('#surename').val('Your Surename');

		$('#cell').val('Cell should only contain numbers 0821234567');

		$('#workphone').val('Work Phone');

		$('#fax').val('Fax');	

		$('#email').val('Your email address');

		$('#toorfromOR').val('toorfromOR');

		$('#toorfromAdd').val('toorfromAdd');

		$('#fulladdress').val('Enter your Full Address...123 Example str, Suburb, City, Code: 1565');

		$('#comment').val('Please enter the date that you need to be transported as well as any additional info...');



		//show the mask and contact divs

		$('#mask').show().fadeTo('', 0.7);

		$('div#contact').fadeIn();



		// stop the modal link from doing its default action

		return false;

	});



	// close the modal window is close div or mask div are clicked.

	$('div#close, div#mask').click(function() {

		$('div#contact, div#mask').stop().fadeOut('slow');



	});



	$('#contactForm input').focus(function() {

		$(this).val(' ');

	});

	

	$('#contactForm textarea').focus(function() {

        $(this).val('');

    });



	// when the Submit button is clicked...

	$('input#submit').click(function() {

		$('.error').hide().remove();

		//Inputed Strings

		var name = $('#name').val(),

			surename = $('#surename').val(),

			cell = $('#cell').val(),

			workphone = $('#workphone').val(),

			fax = $('#fax').val(),

			email = $('#email').val(),

			toorfromOR = $('#toorfromOR').val(),

			toorfromAdd = $('#toorfromAdd').val(),

			fulladdress = $('#fulladdress').val(),

			comment = $('#comment').val();

			

			//Error Count

		var error_count;

		

		//Regex Strings

		var cell_regex = /^[0-9]/;

		

			//Test name

			if(name == '') {

				$('#contact_header').after('<p class=error>Name cannot be empty!</p>');

				error_count += 1;

			}

			

			//Test Surename

			if(surename == '') {

				$('#contact_header').after('<p class=error>Surename cannot be empty!</p>');

				error_count += 1;

			}

			

			//Test Cell

			if(!cell_regex.test(cell)) {

				$('#contact_header').after('<p class=error>The CELL field can only contain Numbers example: 0821234567</p>');

				error_count += 1;

			}

			

			//Blank Full Address?

			if(fulladdress == '') {

				$('#contact_header').after('<p class=error>You need to enter your Full Address</p>');

				error_count += 1;

			}

			

			

			//No Errors?

			if(error_count === 0) {

				$.ajax({

					type: "post",

					url: "send.php",

					data: "name=" + name + "&surename=" + surename + "&cell=" + cell + "&workphone=" + workphone + "&fax=" + fax + "&email=" + email + "&toorfromOR=" + toorfromOR + "&toorfromAdd=" + toorfromAdd + "&fulladdress=" + fulladdress + "&comment=" + comment,

					error: function() {

						$('.error').hide();

						$('#sendError').slideDown('slow');

					},

					success: function () {

						$('.error').hide();

						$('.success').slideDown('slow');

						$('form#contactForm').fadeOut('slow');

					}				

				});	

			}

			

			else {

                $('.error').show();

            }

			

		return false;

	});

	

});

Open in new window


send.php
<?php

//Prefedined Variables
$to = "user@domain.com";
$subject = "Query from twalashuttle.co.za.";

if($_POST) {
	// Collect POST data from form
	$name = stripslashes($_POST['name']);
	$surname = stripslashes($_POST['surname']);	
	$cell = stripslashes($_POST['cell']);
	$workphone = stripslashes($_POST['workphone']);
	$fax = stripslashes($_POST['fax']);	
	$email = stripslashes($_POST['email']);
	$toorfromOR = stripslashes($_POST['toorfromOR']);
	$toorfromAdd = stripslashes($_POST['toorfromAdd']);
	$fulladdress = stripslashes($_POST['fulladdress']);
	$comment = stripslashes($_POST['comment']);

	// Define email variables
	$message = date('d/m/Y')."\n" . $name . " " . $surname ." (" . $email . ") want's transport \n" . $toorfromOR . " " . $toorfromAdd . " " . $fulladdress . " and can be contacted on " . $cell . " or " . $workphone . " for more info. Faxes can be sent to " . $fax . ". The user left the following additional query with regards to the query:". $comment;
	$headers = 'From: '.$email.'\r\n\'Reply-To: ' . $email . '\r\n\'X-Mailer: PHP/' . phpversion();
	
}
?>

Open in new window


reset.css
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
em, font, img,
small, strike, strong, sub, sup,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Open in new window


master.css
body { width: 846px; margin: 0 auto; }



#container {

width:700px;

margin:20px auto;

}



/*contact form*/

#mask {

background-color:#000;

display:none;

height:900px;

left:0;

position:absolute;

top:0;

width:100%;

z-index:9000;

}



#contact {

background-color:#fff;

display:none;

left:50%;

margin-left:-300px;

position:absolute;

top:30px;

width:550px;

z-index:9999;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

padding:20px;

}



#close {

background:url(../images/contact/close.png) no-repeat right;

cursor:pointer;

font-family:arial, sans-serif;

font-size:20px;

font-weight:700;

line-height:24px;

text-decoration:underline;

text-align:right;

padding:5px 30px 5px 5px;

}



#contact_header {

background:url(../images/contact/envelope.png) no-repeat left;

font-family:arial, sans-serif;

font-size:30px;

font-weight:700;

line-height:50px;

padding:5px 5px 10px 60px;

}



/* form components */

input,textarea {

border:1px solid silver;

background-color:#fff;

color:#404040;

font-size:10px;

font-family:Verdana, Arial, sans-serif;

text-transform:uppercase;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

margin:10px 0;

padding:10px;

}



input:hover[type=text],input:focus[type=text],textarea:hover,textarea:focus {

background-color:#E0E0E0;

border:1px solid #000;

}



input[type=text],textarea {

width:300px;

}



#submit {

border:none;

width:87px;

height:41px;

background-image:url(../images/contact/submit.png);

}



#submit:hover {

cursor:pointer;

}



/* alert messages */

.success,.error {

color:#000;

display:none;

font-size:15px;

font-weight:700;

border-radius:4px;

-moz-border-radius:4px;

-webkit-border-radius:4px;

padding:5px 10px 5px 10px;

margin-bottom: 10px;

}



.success {

background-color:#9F6;

border:1px solid #0F0;

}



.error {

background-color:#F66;

border:1px solid red;

}

Open in new window


Please let me know should you have any questions.

Thanks in advance!!!

PublicHTML.zip
0
Comment
Question by:Hendrik Wiese
  • 11
  • 9
20 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
It looks like send.php never calls the PHP mail() function.  Or am I missing something?
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
So I am guessing that line 23 of send.php should say something like this:

mail( $to, $subject, $message, $headers );
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
I added the code to line 23 but it is still not working, you can view the live example at: http://twalashuttle.co.za/contact.php
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I think the AJAX abstraction layer may be standing in the way of getting the diagnostic information you need to debug this.  My first suggestion would be to create a form that will post data directly to the send.php script.  Just use the standard HTML form and the standard HTTP protocols, no AJAX at all.  Then in the send.php script add this line near the top:

var_dump($_POST);

When you do that you will see what is coming through in the POST request.  Once you are satisfied that the standard HTML form works, then you can add the AJAX layer back into the application, and debug that set of issues separately.
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
Let me know if this is what you mean?

I created the following:

testsend.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><center>
  <form id="form1" name="form1" method="post" action="send.php">
    <table width="600px" border="0" cellspacing="20" cellpadding="0">
      <tr>
        <td width="100" align="left" valign="top">Name</td>
        <td width="440" align="left" valign="top"><input name="name" id="name" type="text" size="30" value="Your Name" /></td>
      </tr>
      <tr>
        <td align="left" valign="top">Surename</td>
        <td align="left" valign="top"><input name="surename" id="surename" type="text" size="30" value="Your Surename" /></td>
      </tr>
      <tr>
        <td align="left" valign="top">Cell</td>
        <td align="left" valign="top"><input name="cell" id="cell" type="text" size="30" value="Cell should only contain numbers 0821234567" /></td>
      </tr>
      <tr>
        <td align="left" valign="top">Work Phone</td>
        <td align="left" valign="top"><input name="workphone" id="workphone" type="text" size="30" value="Work Phone" /></td>
      </tr>
      <tr>
        <td align="left" valign="top">Fax</td>
        <td align="left" valign="top"><input name="fax" id="fax" type="text" size="30" value="Fax" /></td>
      </tr>
      <tr>
        <td align="left" valign="top">Your email</td>
        <td align="left" valign="top"><input name="email" id="email" type="text" size="30" value="Your Email Address" /></td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top"><p>
          <label>
            <input name="toorfromOR" type="radio" value="To OR Tambo Airport" />
            To OR Tambo</label>
          <br />
          <label>
             <input name="toorfromOR" type="radio" value="From OR Tambo Airport" />
            From OR Tambo</label>
          <br />
        </p></td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top"><label>
          <input name="toorfromAdd" type="radio" value="to" />
          To Address</label>
          <br />
          <label>
            <input name="toorfromAdd" type="radio" value="from" />
        From Address</label></td>
      </tr>
      <tr>
        <td align="left" valign="top">Full Address</td>
        <td align="left" valign="top"><textarea name="fulladdress" id="fulladdress" rows="5" cols="40">Enter your Full Address...123 Example str, Suburb, City, Code: 1565</textarea></td>
      </tr>
      <tr>
        <td align="left" valign="top">Comments</td>
        <td align="left" valign="top"><textarea name="comment" id="comment" rows="5" cols="40">Please enter the date that you need to be transported as well as any additional info...</textarea></td>
      </tr>
      <tr>
        <td align="left" valign="top">&nbsp;</td>
        <td align="left" valign="top"><label>
          <input type="submit" name="Send" id="Send" value="Send" />
        </label></td>
      </tr>
    </table>
  </form>
</center></body>
</html>

Open in new window


and the send.php only got the one line added:

send.php
<?php

var_dump($_POST);

//Prefedined Variables
$to = "name@domain.com";
$subject = "Query from twalashuttle.co.za.";

if($_POST) {
	// Collect POST data from form
	$name = stripslashes($_POST['name']);
	$surname = stripslashes($_POST['surname']);	
	$cell = stripslashes($_POST['cell']);
	$workphone = stripslashes($_POST['workphone']);
	$fax = stripslashes($_POST['fax']);	
	$email = stripslashes($_POST['email']);
	$toorfromOR = stripslashes($_POST['toorfromOR']);
	$toorfromAdd = stripslashes($_POST['toorfromAdd']);
	$fulladdress = stripslashes($_POST['fulladdress']);
	$comment = stripslashes($_POST['comment']);

	// Define email variables
	$message = date('d/m/Y')."\n" . $name . " " . $surname ." (" . $email . ") want's transport \n" . $toorfromOR . " " . $toorfromAdd . " " . $fulladdress . " and can be contacted on " . $cell . " or " . $workphone . " for more info. Faxes can be sent to " . $fax . ". The user left the following additional query with regards to the query:". $comment;
	$headers = 'From: '.$email.'\r\n\'Reply-To: ' . $email . '\r\n\'X-Mailer: PHP/' . phpversion();
	
	mail( $to, $subject, $message, $headers );
}
?>

Open in new window


I then uploaded it here to test and only get the following when hitting send button:

array(11) { ["name"]=> string(9) "Your Name" ["surename"]=> string(13) "Your Surename" ["cell"]=> string(9) "012356425" ["workphone"]=> string(10) "Work Phone" ["fax"]=> string(3) "Fax" ["email"]=> string(18) "Your Email Address" ["toorfromOR"]=> string(19) "To OR Tambo Airport" ["toorfromAdd"]=> string(4) "from" ["fulladdress"]=> string(67) "Enter your Full Address...123 Example str, Suburb, City, Code: 1565" ["comment"]=> string(87) "Please enter the date that you need to be transported as well as any additional info..." ["Send"]=> string(4) "Send" }
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
OK, that would seem to indicate that the values are getting sent to the action script, send.php and that is a good thing.  I am guessing that you have your own email address in the $to variable, right?  If so, you might want to check and see if you got the email (check spam folders, too).
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
Hi, yes I have got my gmail address in there, but did not get any emails from the site.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Install this script shown below in its entirety and post a link to it.  You can take it down later after we have a chance to see the PHP settings.
<?php phpinfo();

Open in new window

0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
Ok, After entering an email address on the form in the "Your email" field, the message was delivered but it adds this after my email in the from field rn'Reply-To: PHP/5.2.17
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
That's a single-vs-double quotes issue.  Change this line:

$headers = 'From: '.$email.'\r\n\'Reply-To: ' . $email . '\r\n\'X-Mailer: PHP/' . phpversion();

I think the line in the code snippet will work, but I can't test it.
$headers = "From: $email\r\nReply-To: $email\r\nX-Mailer: PHP/" . phpversion() . "\r\n";

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
In PHP, double-quoted strings allow variable substitution and escape character interpretation.  Single quoted strings are taken literally.  There is also the HEREDOC syntax that I find very useful.  More about strings here:
http://php.net/manual/en/language.types.string.php
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
Your string worked thanks. So how would we go about getting this to work with the Ajax?
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I don't know.  My AJAX knowledge is very small.  But you might try using it with the scripts you have now that we know that it can send the email.

If it were my app, I would probably not use AJAX - I don't think it adds any great value to a simple form submit.  But that's just me.
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
I have tried the new send.php with the AJAX code but it is still not working. So if you have any other suggestions, please let me know?

send.php
<?php

var_dump($_POST);

//Prefedined Variables
$to = "myemail@domain.com";
$subject = "Query from twalashuttle.co.za.";

if($_POST) {
	// Collect POST data from form
	$name = stripslashes($_POST['name']);
	$surename = stripslashes($_POST['surename']);	
	$cell = stripslashes($_POST['cell']);
	$workphone = stripslashes($_POST['workphone']);
	$fax = stripslashes($_POST['fax']);	
	$email = stripslashes($_POST['email']);
	$toorfromOR = stripslashes($_POST['toorfromOR']);
	$toorfromAdd = stripslashes($_POST['toorfromAdd']);
	$fulladdress = stripslashes($_POST['fulladdress']);
	$comment = stripslashes($_POST['comment']);

	// Define email variables
	$message = date('d/m/Y')."\n" . $name . ", " . $surename . " (" . $email . ") want's transport " . $toorfromOR . " " . $toorfromAdd . " " . $fulladdress . " and can be contacted on " . $cell . " or " . $workphone . " for more info. Faxes can be sent to " . $fax . ". \n The user left the following additional query with regards to the query: ". $comment;
	$headers = "From: $email\r\nReply-To: $email\r\nX-Mailer: PHP/" . phpversion() . "\r\n";
	
	mail( $to, $subject, $message, $headers );
}
?>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I think we need a little more to go on than just, it is still not working.  Please post the URL of the script so we can see it in action, and describe the symptoms of failure.  If you have not got them yet, please install the free and open source programs Firefox and Firebug.  You can use Firebug to watch your JavaScript as it runs.
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
Thanks for your reply. I have uploaded test files to http://www.twalashuttle.co.za/test/

The test files are as stated above in the original question, the only file that has changed is the send.php which now looks like this:

send.php
<?php

var_dump($_POST);

//Prefedined Variables
$to = "myemail@domain.com";
$subject = "Query from twalashuttle.co.za.";

if($_POST) {
        // Collect POST data from form
        $name = stripslashes($_POST['name']);
        $surename = stripslashes($_POST['surename']);   
        $cell = stripslashes($_POST['cell']);
        $workphone = stripslashes($_POST['workphone']);
        $fax = stripslashes($_POST['fax']);     
        $email = stripslashes($_POST['email']);
        $toorfromOR = stripslashes($_POST['toorfromOR']);
        $toorfromAdd = stripslashes($_POST['toorfromAdd']);
        $fulladdress = stripslashes($_POST['fulladdress']);
        $comment = stripslashes($_POST['comment']);

        // Define email variables
        $message = date('d/m/Y')."\n" . $name . ", " . $surename . " (" . $email . ") want's transport " . $toorfromOR . " " . $toorfromAdd . " " . $fulladdress . " and can be contacted on " . $cell . " or " . $workphone . " for more info. Faxes can be sent to " . $fax . ". \n The user left the following additional query with regards to the query: ". $comment;
        $headers = "From: $email\r\nReply-To: $email\r\nX-Mailer: PHP/" . phpversion() . "\r\n";
        
        mail( $to, $subject, $message, $headers );
}
?>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I can't get it to submit the form at all.  It gives a red rejection notice about the cell field.
0
 
LVL 20

Author Comment

by:Hendrik Wiese
Comment Utility
The cell field must just contain numbers, so if you insert only numbers the notice field should go away.

Ray, I know you said that you don't do AJAX but I would still like for this to work using AJAX. So if you know of something with a similar look and feel that you can suggest, I would gladly check it out.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
Have you tested the link you provided?  Did it work for you?  I copied the example number shown in the form's error message and pasted it into the cell.  And it gave me the red rejection notice.  I could not get past it to submit the other fields, and I tried several number strings.  I also found that the cells themselves originally contained the prompt string telling me what to put into the cell.  But as soon as I clicked a cell, the prompt was lost and I was looking at a blank field with no clue on the screen about what to put into it.  Even the "submit" button went blank.

Acknowledging that your time is valuable and (as the saying goes) time is money, you might want to consider hiring a professional programmer to write this for you.  A pro would get it done in a matter of an hour or two and it would not cost you very much at all.  But if you do not have any economic interest in this and just want to use it for a learning exercise, read on.

Do you have any PHP or Web Applications user groups near you?  In Washington, DC we have a PHP user group that meets once monthly for technical exchange and once monthly for beer/social exchange.  You might want to take the application to a user group meeting and ask colleagues what could be done to make it more of a user-friendly experience.

The basic idea of a form-to-email script is a pretty well understood design pattern (see the code snippet).  As I wrote above, I think the AJAX part of this is something that is getting in the way of your success, not adding value to the application but making it harder for you to debug and harder for your clients to use your form.  But if you really feel you must have some kind of AJAX interface, you might want to learn about jQuery.  This would seem to be a good place to start.
http://docs.jquery.com/Tutorials

You might want to see if others have addressed this issue.  Make a Google search for jQuery form-to-email script.  It looks like there are many good learning resources right on the first page.  

I wish this were a question with an answer and I have done my best to help with the parts of the problem that can be singled out, but it seems to have issues all over the map, so I will have to sign off now.  Good luck with your project, ~Ray
<?php // RAY_form_to_email.php
error_reporting(E_ALL);



// SEND MAIL FROM A FORM



// REQUIRED VALUES ARE PREPOPULATED - CHANGE THESE FOR YOUR WORK
$from  = "NoReply@Your.org";
$subj  = "Contact Form";

// THIS IS AN ARRAY OF RECIPIENTS - CHANGE THESE FOR YOUR WORK
$to[]  = "You@Your.org";
$to[]  = "Her@Your.org";
$to[]  = "Him@Your.org";



// IF THE DATA HAS BEEN POSTED
if (!empty($_POST['email']))
{
    // CLEAN UP THE POTENTIALLY BAD AND DANGEROUS DATA
    $email      = clean_string($_POST["email"]);
    $name       = clean_string($_POST["name"]);
    $telephone  = clean_string($_POST["telephone"]);

    // CONSTRUCT THE MESSAGE THROUGH STRING CONCATENATION
    $content    = NULL;
    $content   .= "You have a New Query From $name" . PHP_EOL . PHP_EOL;
    $content   .= "Tel No: $telephone" . PHP_EOL;
    $content   .= "Email: $email" . PHP_EOL;

    // SEND MAIL TO EACH RECIPIENT
    foreach ($to as $recipient)
    {
        if (!mail( $recipient, $subj, $content, "From: $from\r\n"))
        {
            echo "MAIL FAILED FOR $recipient";
        }
        else
        {
            echo "MAIL WORKED FOR $recipient";
        }
    }
}


// A FORM TO TAKE CLIENT INPUT FOR THIS SCRIPT
$form = <<<ENDFORM
<form method="post">
Please enter your contact information
<br/>Email: <input name="email" />
<br/>Phone: <input name="telephone" />
<br/>Name:  <input name="name" />
<br/><input type="submit" />
</form>
ENDFORM;

echo $form;



// A FUNCTION TO CLEAN UP THE DATA - AVOID BECOMING AN OPEN-RELAY FOR SPAM
function clean_string($str)
{
    // IF MAGIC QUOTES IS ON, WE NEED TO REMOVE SLASHES
    $str = stripslashes($str);

    // REMOVE EXCESS WHITESPACE
    $rgx
    = '/'               // REGEX DELIMITER
    . '\s'              // MATCH THE WHITESPACE CHARACTER(S)
    . '\s+'             // MORE THAN ONE CONTIGUOUS INSTANCE OF WHITESPACE
    . '/'               // REGEX DELIMITER
    ;
    $str = preg_replace($rgx, ' ', $str);

    // REMOVE EVERYTHING EXCEPT THE CHARACTERS WE WANT TO ALLOW
    $rgx
    = '/'               // REGEX DELIMITER
    . '['               // START OF A CHARACTER CLASS
    . '^'               // NEGATION - MATCH NONE OF THE CHARACTERS IN THIS CLASS
    . 'A-Z0-9&+:?_.- '  // CHARACTERS WE WANT TO KEEP
    . ']'               // END OF THE CHARACTER CLASS
    . '/'               // REGEX DELIMITER
    . 'i'               // CASE-INSENSITIVE
    ;
    $str = preg_replace($rgx, NULL, $str);

    return $str;
}

Open in new window

0
 
LVL 20

Author Closing Comment

by:Hendrik Wiese
Comment Utility
Thanks
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now