SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display "Message Sent" alert in same colorbox modal as contact form

    Hello,

    The website I am working on can be found here.

    When a user clicks the "Send Carol a Message" button and submits the form I would like the "Message Sent Successfully" alert to display within the modal window.

    Ideally, I would like for the modal to close after "X" seconds but this is not an absolute necessity

    Colorbox Call:

    Code:
    <script type="text/javascript">
    	$(document).ready(function(){
    	$(".contact").colorbox({inline:true, href:"#contact", width:"450px", height:"520px" });
    	});
    	</script>
    HTML for form
    Code:
    <div id="contact">
    			<div id="contact-wrapper">
    				<div class="widgetTitle">Contact Carol</div>
    				<span class="widgetDivide"></span>
    				<div class="around">
    					<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactForm">
    						<div>
    							<label for="contactname">Name:</label>
    							<input type="text" size="30" name="contactname" id="contactname" value="" class="required" />
    						</div>
    						<div>
    							<label for="email">Email Address:</label>
    							<input type="text" size="30" name="email" id="email" value="" class="required email" />
    						</div>
    						<div>
    							<label for="phone">Phone Number: (Optional)</label>
    							<input type="text" size="30" name="phone" id="phone" value="" />
    						</div>
    						<div>
    							<label for="message">Message:</label>
    							<textarea rows="5" cols="45" name="message" id="message" class="required"></textarea>
    						</div>
    						<div>
    						<input class="subbet" type="submit" value="Send Message" name="submitContact" />
    						</div>
    					</form>
    				</div>
    			</div>
    		</div>
    PHP for form processing

    Code:
    <?php
    //CONTACT FORM SUBMIT
    if(isset($_POST['submitContact'])) {
    	//Check to make sure that the name field is not empty
    	if(trim($_POST['contactname']) == '') {
    		$hasError = true;
    	} else {
    		$contactname = trim($_POST['contactname']);
    		$phone = trim($_POST['phone']);
    	}
    	//Check to make sure sure that a valid email address is submitted
    	if(trim($_POST['email']) == '')  {
    		$hasError = true;
    	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    		$hasError = true;
    	} else {
    		$email = trim($_POST['email']);
    	}
    	//Check to make sure comments were entered
    	if(trim($_POST['message']) == '') {
    		$hasError = true;
    	} else {
    		if(function_exists('stripslashes')) {
    			$message = stripslashes(trim($_POST['message']));
    		} else {
    			$message = trim($_POST['message']);
    		}
    	}
    	//If there is no error, send the email
    	if(!isset($hasError)) {
    		$emailTo = 'carol@cagsellshomes.com'; //Put your own email address here
    		$subject = 'CAG Website Inquiry';
    		$body = "Name: $contactname \n\nEmail Address: $email \n\nPhone Number: $phone \n\nMessage:\n\n $message";
    		$headers = 'From: CAG Website Inquiry <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;
    		mail($emailTo, $subject, $body, $headers);
    		$emailSent = true;
    	}
    }
    ?>

    PHP for "Message Sent Successfully" alert

    Code:
    <?php if(isset($hasError)) { //If errors are found ?>
    									<p class="error">Error Sending Message.</p>
    									<?php } ?>
    									<?php if(isset($emailSent2) && $emailSent2 == true) { //If email is sent ?>
    									<p>Message Sent Successfully!</p>
    									<?php } ?>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by espett View Post
    When a user clicks the "Send Carol a Message" button and submits the form I would like the "Message Sent Successfully" alert to display within the modal window.
    A typical way of doing this is to post the form to the server, and on a successful result to then take action as you require, such as showing the modal dialog box with its message.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •