9 Replies - 1547 Views - Last Post: 10 January 2011 - 08:26 PM

#1 webmin  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

An Ajax based form processor

Posted 07 January 2011 - 03:58 PM

Hi dreamincode,

I am working on a project that currently works, but I think it could work better. I have a tab for built for a contact form, the form performs all validation on the fly, and even has reCaptcha to prevent spambots. What I'd like to work on is instead of the current setup where someone clicks the submit button, it takes them to the form processor, which then redirects them back to the home page(which is my entire site. The entire site is one page). Anyways, if someone fails the captcha challenge, they can go back, but it takes them back to the default tab(not the contact form tab) and it also resets the contact form so the user has to re-enter everything.

What I would like to do instead is when the user presses the submit button, I'd like it to show a window that overlays the page with the results of the form and the option to continue submitting the form (or cancel and return to edit the information). Or if the user fails the captcha challenge, it lets the user know and offers them the chance to try again or cancel. I know the ability to do this lies somewhere in my contactprocessor.php, but this is a little out of my reach as far as skill goes. If someone can point me to an excellent resource or if anyone would like to offer a better (perhaps simpler solution) I'm all for it.

I've provided the code for my contactprocessor.php for anyone that wants to take a look:

<?php
require_once('../phpscripts/recaptchalib.php');
$privatekey = "6LfcN8ASAAAAAImzmhMe0KBaiJZHEDe5FUvaEA5M";
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
  // What happens when the CAPTCHA was entered incorrectly
die ("The reCAPTCHA wasn't entered correctly. <a href='javascript:history.go(-1)'>Go back</a> and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");}
else
{
		$firstName = sanitizeString($_POST[fName]);
		$lastName = sanitizeString($_POST[lName]);
		$phone = sanitizeString($_POST[number]);
		$email = sanitizeString($_POST[email]);
		$subject = sanitizeString($_POST[subject]);
		$question = sanitizeString($_POST[question]);
		
		$sendToEmail = 'support@tlscomputing.com';
		$mailSubject = $subject . " question for " . $firstName . ", " . $lastName;
		$message = "$firstName asks: $question\n\n Please Respond to: $email, or call: $phone";
		
		mail($sendToEmail, $mailSubject, $message);
		header("Location: ../home.html");
}
		
function sanitizeString($var)
{
	$var = stripslashes($var);
	$var = htmlentities($var);
	$var = strip_tags($var);
	return $var;
}
?>



Is This A Good Question/Topic? 0
  • +

Replies To: An Ajax based form processor

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: An Ajax based form processor

Posted 08 January 2011 - 08:38 AM

What does your <form> tag look like?
Was This Post Helpful? 0
  • +
  • -

#3 webmin  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: An Ajax based form processor

Posted 08 January 2011 - 05:38 PM

<form id="form1" name="form1" method="post" action="phpscripts/contactprocessor.php"> 
						<fieldset> 
							<legend>Contact Details</legend> 
							<table width="100%" border="0"> 
								<tr> 
									<th width="15%" align="left" scope="row">First Name: </th> 
									<td width="85%"><span id="firstName"> 
										<input type="text" name="fName" id="fName" /> 
										<span class="textfieldRequiredMsg">A value is required.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Last Name: </th> 
									<td><span id="lastName"> 
										<input type="text" name="lName" id="lName" /> 
										<span class="textfieldRequiredMsg">A value is required.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Phone Number: </th> 
									<td><span id="phoneNumber"> 
									<input type="text" name="number" id="number" /> 
									<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Email Address: </th> 
									<td><span id="emailAddress"> 
									<input type="text" name="email" id="email" /> 
									<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td> 
								</tr> 
							</table> 
						</fieldset> 
						<fieldset><legend>Message</legend> 
							<table width="100%" border="0"> 
								<tr> 
									<th width="15%" align="left" scope="row">Subject: </th> 
									<td width="85%"><span id="questionSubject"> 
									<select name="subject" id="subject"> 
									<option value="-1" selected="selected">Please Choose a Department</option> 
										<option>Sales</option> 
										<option>Technical Support</option> 
										<option>Billing</option> 
										<option>General Questions</option> 
									</select> 
									<span class="selectInvalidMsg">Please select a valid item.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Question:</th> 
									<td><span id="questionBox"> 
									<textarea name="question" id="question" cols="45" rows="5"></textarea> 
									<br /><span id="countquestionBox">&nbsp;</span>&nbsp;Characters Remaining&nbsp;<span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Message is too long</span></span></td> 
								</tr> 
							</table> 
 
						</fieldset> 
						<fieldset><legend>Send Message</legend> 
						<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfcN8ASAAAAAAOLGXHGD8XB3GI1qZpoaO2oSeUZ"> 
    					</script> 
						<noscript> 
						   <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfcN8ASAAAAAAOLGXHGD8XB3GI1qZpoaO2oSeUZ"
							   height="300" width="500" frameborder="0"></iframe><br />
						   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
						   </textarea>
						   <input type="hidden" name="recaptcha_response_field"
							   value="manual_challenge" />
						</noscript> 
						<input name="reset" type="reset" value="Reset" /> 
						<input name="submit" type="submit" value="Submit" /> 
						</fieldset> 
					</form>


Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: An Ajax based form processor

Posted 08 January 2011 - 09:56 PM

Try:

<form id="form1" name="form1" method="post" action="phpscripts/contactprocessor.php" onsubmit="return validateCode()"> 



Depending upon you validation code,
return true if validation passed
or return false if it fails.

Unless you specifically reference it,
you probably don't need the 'id="form1"' portion of the tag.

This post has been edited by JMRKER: 08 January 2011 - 09:57 PM

Was This Post Helpful? 0
  • +
  • -

#5 webmin  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: An Ajax based form processor

Posted 09 January 2011 - 08:06 AM

The Form validates itself using the Spry Framework from dreamweaver. What I'm trying to do is display the results of contactprocessor.php without leaving the current page the form is on, this way if someone wants to correct something, they can.
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: An Ajax based form processor

Posted 09 January 2011 - 03:41 PM

I don't know anything about a Spry framework in DreamWeaver,
so I can't help there much.
I would be nice if you had specified that in the first post, and I would not have even attempted to try to help.

Keep in mind, the script will not stay on the same page if it thinks control has been given over to another process. In this case, unless your validation code returns a true or false about the validation (which you have not provided as far as I can see), the onsubmit assumes the results to be true and leaves further actions to the next program named(?) contactprocessor(). If the validation function returns a false, then the onsubmit does not exit the page, which would allow the user to correct any mistakes the validation function believes to exist.
.
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3030
  • View blog
  • Posts: 10,553
  • Joined: 08-August 08

Re: An Ajax based form processor

Posted 09 January 2011 - 04:25 PM

Where is your Javascript? Specifically, where are your ajax calls?
Was This Post Helpful? 0
  • +
  • -

#8 webmin  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: An Ajax based form processor

Posted 09 January 2011 - 06:50 PM

It's in another folder and is linked to the page. Here is the full source code for my page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<title>TLS Computing - Home Page</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" /> 
<script src="javascripts/scripts.js" type="text/javascript"></script> 
<!--<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationselect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>--> 
<script type="text/javascript"> 
 var RecaptchaOptions = {
    theme : 'blackglass'
 };
 </script> 
<!--<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationselect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />--> 
</head> 
 
<body> 
<center> 
<div id="masthead"> 
	<a href="http://www.tlscomputing.com"><img src="images/toplogo.png" width="768" height="150" border="0"/></a> 
</div> 
<div id="top_nav"> 
	&nbsp;
</div> 
<div id="container"> 
	<div id="page_content"> 
		<div id="TabbedPanels1" class="TabbedPanels"> 
  			<ul class="TabbedPanelsTabGroup"> 
  				<li class="TabbedPanelsTab" tabindex="0">Home</li> 
  				<li class="TabbedPanelsTab" tabindex="0">About Us</li> 
				<li class="TabbedPanelsTab" tabindex="0">Our Services</li> 
  				<li class="TabbedPanelsTab" tabindex="0">Contact Us</li> 
  				</ul> 
  			<div class="TabbedPanelsContentGroup"> 
  				<div class="TabbedPanelsContent"><p id="page_content">Welcome to TLS Computing Home Page. Unfortunately we are still working on our site so that we can best serve you. However, that doesn't mean we are entirely unreachable. If you would like to email support@tlscomputing.com, call (904)209-9030, or use our Contact Form on the <a onclick="TabbedPanels1.showPanel(3)" id="tabLink">Contact Us Tab</a>, we will be more than happy to discuss any questions you may have. Thanks and have a great day!</p> 
  					<img src="images/working.png" alt="Under Construction" width="500" height="100" /> 
					<div class="rightColumn" style="float:right"> 
					</div> 
				</div> 
  				<div class="TabbedPanelsContent">About Us
				</div> 
  				<div class="TabbedPanelsContent"> 
					<p>At TLS Computing
  					<div id="Accordion1" class="Accordion" tabindex="0"> 
  						<div class="AccordionPanel"> 
  							<div class="AccordionPanelTab">Click here for our Computer Solutions</div> 
  							<div class="AccordionPanelContent">Content 1</div> 
  							</div> 
						<div class="AccordionPanel"> 
							<div class="AccordionPanelTab">Click here for our Programming Solutions</div> 
							<div class="AccordionPanelContent">Content 2</div> 
						</div> 
						<div class="AccordionPanel"> 
							<div class="AccordionPanelTab">Click here for our Web Design/Hosting Solutions</div> 
							<div class="AccordionPanelContent">Content 3</div> 
						</div> 
  					</div> 
  				</div> 
  				<div class="TabbedPanelsContent"> 
					<p><span class="alert">Important Instructions:</span> Please make sure to fill out this form carefully as their are specific ways to enter your information. For your phone number be sure to use this format: (xxx)xxx-xxxx. Also please know that an incorrect submission on the Captcha Challenge will reset this form. Please enter it carefully. If you do not wish to use this form to contact us, feel free to shoot us a direct email to: support@tlscomputing.com, or give us a call at (904)209-9030. Thanks.
						
						
					</p> 
					<form id="form1" name="form1" method="post" action="phpscripts/contactprocessor.php"> 
						<fieldset> 
							<legend>Contact Details</legend> 
							<table width="100%" border="0"> 
								<tr> 
									<th width="15%" align="left" scope="row">First Name: </th> 
									<td width="85%"><span id="firstName"> 
										<input type="text" name="fName" id="fName" /> 
										<span class="textfieldRequiredMsg">A value is required.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Last Name: </th> 
									<td><span id="lastName"> 
										<input type="text" name="lName" id="lName" /> 
										<span class="textfieldRequiredMsg">A value is required.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Phone Number: </th> 
									<td><span id="phoneNumber"> 
									<input type="text" name="number" id="number" /> 
									<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Email Address: </th> 
									<td><span id="emailAddress"> 
									<input type="text" name="email" id="email" /> 
									<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td> 
								</tr> 
							</table> 
						</fieldset> 
						<fieldset><legend>Message</legend> 
							<table width="100%" border="0"> 
								<tr> 
									<th width="15%" align="left" scope="row">Subject: </th> 
									<td width="85%"><span id="questionSubject"> 
									<select name="subject" id="subject"> 
									<option value="-1" selected="selected">Please Choose a Department</option> 
										<option>Sales</option> 
										<option>Technical Support</option> 
										<option>Billing</option> 
										<option>General Questions</option> 
									</select> 
									<span class="selectInvalidMsg">Please select a valid item.</span></span></td> 
								</tr> 
								<tr> 
									<th align="left" scope="row">Question:</th> 
									<td><span id="questionBox"> 
									<textarea name="question" id="question" cols="45" rows="5"></textarea> 
									<br /><span id="countquestionBox">&nbsp;</span>&nbsp;Characters Remaining&nbsp;<span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Message is too long</span></span></td> 
								</tr> 
							</table> 
 
						</fieldset> 
						<fieldset><legend>Send Message</legend> 
						<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfcN8ASAAAAAAOLGXHGD8XB3GI1qZpoaO2oSeUZ"> 
    					</script> 
						<noscript> 
						   <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfcN8ASAAAAAAOLGXHGD8XB3GI1qZpoaO2oSeUZ"
							   height="300" width="500" frameborder="0"></iframe><br />
						   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
						   </textarea>
						   <input type="hidden" name="recaptcha_response_field"
							   value="manual_challenge" />
						</noscript> 
						<input name="reset" type="reset" value="Reset" /> 
						<input name="submit" type="submit" value="Submit" /> 
						</fieldset> 
					</form> 
					<p>&nbsp;</p> 
  				</div> 
  				</div> 
  			</div> 
	</div> 
</div> 
<div id="footer"> 
	Copyright &copy; 2011 TLS Computing LLC All Rights Reserved
</div> 
<script type="text/javascript"> 
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
//-->
</script> 
</center> 
<script type="text/javascript"> 
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("firstName", "none", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("lastName", "none", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("phoneNumber", "phone_number", {format:"phone_custom", pattern:"(xxx)xxx-xxxx", validateOn:["blur"]});
var sprytextfield4 = new Spry.Widget.ValidationTextField("emailAddress", "email", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.Validationselect("questionSubject", {isRequired:false, invalidValue:"-1", validateOn:["blur", "change"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("questionBox", {validateOn:["blur"], maxChars:1000, counterType:"chars_remaining", counterId:"countquestionBox", useCharacterMasking:false});
//-->
</script> 
</body> 
 
</html>



Let me know if you need to see the full javascript file, or if you're thinking that the results of the form should be handled by that.
Was This Post Helpful? 0
  • +
  • -

#9 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3030
  • View blog
  • Posts: 10,553
  • Joined: 08-August 08

Re: An Ajax based form processor

Posted 10 January 2011 - 04:49 PM

  • Don't use tables for formatting.
  • You should always try to keep your languages separated. There should be separate files for php, html, javascript, css, and anything else you use.
  • If you're using ajax to validate, then you need to look at that specific code if you want to make changes to it!

Was This Post Helpful? 0
  • +
  • -

#10 aaron1178  Icon User is online

  • Dovakiin, Dragonborn
  • member icon

Reputation: 169
  • View blog
  • Posts: 1,299
  • Joined: 22-October 08

Re: An Ajax based form processor

Posted 10 January 2011 - 08:26 PM

Ok, well im only a new comer to ajax and php, but what ive learned with ajax is that i can do what you are asking: show data from another page when the user clicks submit without changing the page.
<script type="text/javascript">
function check()
{
http = new XMLHttprequest();
http.open("POST","script.php?wat1=var&wat2=var2", true);
http.onreadystatechange = function()
{
if(http.readystatus == 4)
{
//this following is what will be from the script.php page
alert(http.responsetext);
}
}
http.send();
}
</script>



Now the only thing with this is that from the script page, you need to have like a var named $text and keep adding like so: $text .= "another" then to add more, $text .= ",mymoretext".

Now in javascript you will need to split it at the , devider
var split = http.responsetext.split(","); and use it like an array.

Hope this helps

Thanks Aaron1178
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1