craigsworks.com - Support Forum / qTip 1.x / Help and support v / post ajax from qtip2/validation form

Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
post ajax from qtip2/validation form
2nd July, 01:44
Post: #1
jquerynewb Offline
Junior Member
**
 		Posts: 3
Joined: Jul 2011
Reputation: 0
post ajax from qtip2/validation form
I am having the hardest time getting a form working.

I want to pass the variables from the form to a php script. the PHP script works fine. But I can't get the form to work with the validation/qtip2 from craigsworks site.

I was assuming that you fire it at the success area, but can't get it to work at all.

HTML Code 
success: 	$.noop, // Odd workaround for errorPlacement not firing!
         			$.ajax({
						url: "code/mail.php",
						type: "POST",
						data: {name:$('#name').val(),
									  fname:$('#fname').val(),
									  lname:$('#lname').val(),
									  email:$('#email').val(),
									  phone:$('#phone').val(),
									  message:$('#message').val()},
						success: alert('success'),
						error: alert('error'),


Any help is so appreciated. I've been trying to get it to pass the above variables to the php script mail.php for days now and just can't get it.

Thanks
Find all posts by this user
Quote this message in a reply
4th July, 14:28
Post: #2
Craig Offline
Creator
*******
 		Posts: 4,342
Joined: Feb 2010
Reputation: 16
RE: post ajax from qtip2/validation form
What exactly are you attempting to do in the success handler? Those alert() functions won't work because you're actually calling them and passing their return value (which is undefined). If you want to alert 'success' you'll need to pass it a lambda function:

JS Code 
success: function(){ alert('success'); },
error: function(){ alert('error'); }
Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
7th July, 19:50
Post: #3
jquerynewb Offline
Junior Member
**
 		Posts: 3
Joined: Jul 2011
Reputation: 0
RE: post ajax from qtip2/validation form
(4th July 14:28)Craig Wrote:  What exactly are you attempting to do.

Sorry for not being clear on what I was trying to do. What I would ideally love to accomplish would be the following:

1) Once form is validated and all required fields filled in, send the data from the qtip2/jquery validation form to the php script via ajax.
//send the ajax request
$.post('code/mail.php',{name:$('#name').val(),
fname:$('#fname').val(),
lnam:$('#lnam').val(),
email:$('#email').val(),
phone:$('#phone').val(),
message:$('#message').val()},

2) When the data is sent to the php script show a div containing a loading animation / hide the form
//hide the form
$('.contactForm').hide();

//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});

3) When the php script is complete and the mail it successfully sent, display that the email has successfully been sent
function(data){
//hide the loading bar
$('.bar').css({display:'none'});
$('.loader').append(data);
});
However, If the email php script failed and the email was not sent, display a message that the email was not sent.

Here is the relevant reworked code. Maybe you can see where I am not getting it right.

HTML Code 
<!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" xml:lang="en" lang="en">
<head>
<title><? if (isset($subtitle)) { echo $subtitle; } ?> </title>
<link rel="stylesheet" href="css/comb.css" media="screen">
<link rel="stylesheet" href="css/jquery.qtip.min.css" media="screen">
<style>
.bar{
	display:none; 
	background:url(../images/loadingAnimation.gif) no-repeat center;
	margin-top:100px;
	margin-left:75px;	
	height:40px; width:230px;
}
 
#contactFormHOLDER {
	position:relative;
	height:650px;
	width:400px;
}
 
#contactForm {
	height:289px;
	width:400px;
}   
 
 
 
</head>
<?php flush(); ?>
<body>
<div id="contactFormHOLDER">
	<div id="contactForm">
		<div class="loader"></div><!-- loader End -->
		<div class="bar"></div><!-- bar End -->
 
		<form id="application" action="code/mail.php" class="contactForm" name="cform" method="">
 
			<div id="Table_01">
 
				<div id="Layout-01">
				</div><!-- Layout-01 End -->
 
				<div id="Layout-02">
					<label for="fname"><em>First Name</em><span class="req">*</span></label>
					<input id="fname" value="" name="fname" placeholder="John" type="text" >
				</div><!-- Layout-02 End -->
 
				<div id="Layout-03">
					<label for="lname"><em>Last Name</em><span class="req">*</span></label>
					<input id="lname" value="" name="lname" placeholder="Smith" type="text" >
				</div><!-- Layout-03 End -->
 
				<div id="Layout-04">
				</div><!-- Layout-04 End -->
 
				<div id="Layout-05">
					<label for="email"><em>E-mail</em><span class="req">*</span></label>
					<input placeholder="name@example.com" value="" type="text" name="email" id="email" />
				</div><!-- Layout-05 End -->
 
				<div id="Layout-06">
					<label for="phone"><em>Phone Number</em></label>
					<input id="phone" value="" name="phone" type="text">
				</div><!-- Layout-06 End -->
 
				<div id="Layout-11">
					<fieldset></fieldset>
				</div><!-- Layout-11 End -->
 
				<div id="Layout-12">
					<label for="message"><em>Message</em><span class="req">*</span></label>
					<textarea id="message" rows="" cols="" name="message"></textarea>
					<!-- RECAPTCHA PENDING
						<label for="spamquestion"><em>Anti-SPAM Question</em></label>
						<input id="spamquestion" value="" name="spamquestion" type="text">
					-->
					<input class="submit" type="submit" name="submit" value="Send" o<strong></strong>nfocus="this.blur()"  />
				</div><!-- Layout-12 End -->
 
			</div><!-- Table_01 End -->
 
		</form>
    </div><!-- contactForm End -->
</div><!-- contactFormHOLDER End -->
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<!-- FALLBACK PENDING -->
 
<script type="text/javascript" src="code/jquery.qtip.min.js"></script>
 
<!--ADD DATEPICKER LATER-->
<script>
$(function() {
	var dates = $( "#arrival, #departure" ).datepicker({
		defaultDate: null,
		numberOfMonths: 1,
		showOtherMonths: true,
		selectOtherMonths: true,
		dateFormat: 'mm/dd/y',
		onSelect: function( selectedDate ) {
			var option = this.id == "arrival" ? "minDate" : "maxDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			dates.not( this ).datepicker( "option", option, date );
		}
	});
});
</script>
 
<script>
$(document).ready(function()
{
   var application = $('form:first');
 
   application.validate({
         errorClass: "errormessage",
         onkeyup: false,
         errorClass: 'error',
         validClass: 'valid',
         rules: {
            fname: { required: true, minlength: 3 },
            lname: { required: true, minlength: 3 },
            email: { required: true, email: true },
            message: { required: true, minlength: 10 }
         },
         errorPlacement: function(error, element)
         {
            // Set positioning based on the elements position in the form
            var elem = $(element),
               corners = ['top right', 'bottom right'],
               flipIt = elem.parents('span.right').length > 0;
 
            // Check we have a valid error message
            if(!error.is(':empty')) {
               // Apply the tooltip only if it isn't valid
               elem.filter(':not(.valid)').qtip({
                  overwrite: false,
                  content: error,
                  position: {
                     my: corners[ flipIt ? 0 : 1 ],
                     at: corners[ flipIt ? 1 : 0 ],
                     viewport: $(window)
                  },
                  show: {
                     event: false,
                     ready: true
                  },
                  hide: false,
                  style: {
                     classes: 'ui-tooltip-red ui-tooltip-shadow' // Make it red... the classic error colour!
                  }
               })
 
               // If we have a tooltip on this element already, just update its content
               .qtip('option', 'content.text', error);
            }
 
            // If the error is empty, remove the qTip
            else { elem.qtip('destroy'); }
         },
         success: 	$.noop, // Odd workaround for errorPlacement not firing!
 
			//hide the form
			$('.contactForm').hide();
 
			//show the loading bar
			$('.loader').append($('.bar'));
			$('.bar').css({display:'block'});
 
			//Send Data to PHP Script
         			$.ajax({
				url: "code/mail.php",
				type: "POST",
				data: {	  name:$('#name').val(),
					  fname:$('#fname').val(),
					  lname:$('#lname').val(),
					  email:$('#email').val(),
					  phone:$('#phone').val(),
					  message:$('#message').val()},
				success:
					 $('.bar').css({display:'none'});
			 		 $('.loader').append(data);
 
				error: alert('error'),
					$('.bar').css({display:'none'});
			  		$('.loader').append(data);
					alert('Email not Sent, please email by clicking link on side')
   })
});
</script>
</body>
</html>



PHP Code 
<?php
<VARIOUS ABUSE CHECKS REMOVED FOR SPACE>
    foreach ($_POST as $key => $value) {
        $value = trim($value);
<MORE VARIOUS ABUSE CHECKS REMOVED FOR SPACE>
        $_POST[$key] = stripslashes(strip_tags($value));
    }
 
    if (!ereg("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,6})$",strtolower($_POST['email']))) {
        exit("<p> </p><p> </p><p> </p><p><center><strong><font color=#900 size=+1> » That e-mail address is not valid, please use another. « </font></strong></center></p>");
    }
 
		// Set up the variables	
		$IP=gethostbyaddr($_SERVER['REMOTE_ADDR']);
		$date=date("F j, Y");		  
		$time=date("g:i A"); 
 
		// Import The Data	
		$fname=$_POST['fname'];
		$lname=$_POST['lname'];
		$email=$_POST['email'];
		$phone=$_POST['phone'];
		$message=$_POST['message'];
 
		// Make 'em pretty
		$fname=trim(stripslashes(strip_tags($fname)));
		$lname=trim(stripslashes(strip_tags($lname)));
		$email=trim(stripslashes(strip_tags($email)));
		$phone=trim(stripslashes(strip_tags($phone)));
		$stripmessage=trim(stripslashes(strip_tags($message)));
 
		// Get todays date
		$todayis = date("l, F j, Y, g:i a") ;
 
		$toname="Me";
		$toaddress="Me@wbsite.com";
		$subject = "Form Email";
 
		// Data for the Email
		$body .= "
		Date:                    $date\r
		Time:                    $time\r
		\r
		Contact Information:\r
		Name:                 $fname $lname\r
		E-Mail:                $email\r
		Phone:                $phone\r
		\r
		\r
		Message:\r
		$stripmessage\r
		\r\n";
 
		// Set Up The Header for sendmail	
		$headers2 .= "From: $toname <$toaddress>\r\n"; 
		$headers2 .= "Reply-To: $toname <$toaddress>\r\n"; 
		$headers2 .= "To: $fname $lname <$email>\r\n"; 
		$headers2 .= "MIME-Version: 1.0\r\n"; 
		$headers2 .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
		$headers2 .= "X-Priority: 1\r\n"; 
		$headers2 .= "X-MSMail-Priority: High\r\n"; 
		$headers2 .= "X-Mailer: PHP Mailer ". phpversion();
 
    if (mail($toaddress,$subject,$body,$headers2)) {
    } else {
        echo "<p><center><strong><font color=#900 size=+1> » Sorry, there was an error delivering your message. Please use an alternative method of contact. « </font></strong></center></p>";
	die;
    }
}
?>
 
<!--Display a thank you message in the callback -->
<div id="mail_response">
    <center><h1>Thank you <?php echo $fname ?>!</h1>
    <h2>I will answer your message as soon as possible.</h2>
    <h3>Message sent on: <?php echo $todayis ?></h3></center>
</div>


Thanks Craig

I love your scripts and how involved you are with your community. Very cool!
Find all posts by this user
Quote this message in a reply
14th July, 06:18
Post: #4
jquerynewb Offline
Junior Member
**
 		Posts: 3
Joined: Jul 2011
Reputation: 0
RE: post ajax from qtip2/validation form
anyone?
Find all posts by this user
Quote this message in a reply
14th July, 08:19
Post: #5
Craig Offline
Creator
*******
 		Posts: 4,342
Joined: Feb 2010
Reputation: 16
RE: post ajax from qtip2/validation form
You'll need to setup a test case on jsfiddle so people can help out Smile http://jsfiddle.net/fdavn/
Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  qTip2 themeroller question gmilby 1 30 14th May 17:50
Last Post: Craig
  [Solved] qTip2 inside map infowindow costales 3 191 15th April 08:29
Last Post: costales
  [Solved] Form submit grabbing wrong value loveccb 3 567 26th January 16:53
Last Post: ramon.alvarez
  qTip modal accept/decline form jinx8402 0 438 15th December 13:34
Last Post: jinx8402
  [Solved] qTip input fields validation not working with display:none Maverick 6 1,412 25th July 16:44
Last Post: Maverick
  [Solved] IDIOT'S GUIDE TO QTIP2 vegetarian cannibal 3 1,225 13th July 13:57
Last Post: Craig
  form wizzard rify 0 337 29th June 14:30
Last Post: rify
  qtip2 with wordpress adamS 0 1,122 24th May 17:32
Last Post: adamS
  [Solved] Form within qTip barnaby 3 1,203 28th February 18:08
Last Post: Craig
  Having a file upload form in qTip, possible? Help! lancelot_one 5 1,152 19th February 18:01
Last Post: lancelot_one



User(s) browsing this thread: 1 Guest(s)

Contact Us | craigsworks.com | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication