Forums

cybershot

I have been going crazy for two hours trying to get this to work. I have a form, it works fine. After I submit the form, I want to display a success message and hide the form. Right now, after pushing the submit button, the form goes away, the success message displays for the blink of an eye and then the contact page shows normally. That is all fine, I just need the success message to stay up a bit longer.

 <?php
				if (isset($_POST['send'])) {
					
					$contactSubject = "";
					$from = "";
					$sendEmail = "";
					
					$contactName = strip_tags($_POST['contactname']);
					$subject = strip_tags($_POST['subject']);
					$email = $_POST['email'];
					$messages = strip_tags($_POST['message']);
					//check to see if the variables are empty, if they are, just exit
					$validation = true;
					
					if (empty($contactName) || empty($email) || empty($messages)) {       
						$validation = false;
					} else {
						$validation = true;        
					}
					
					if($validation == true){
						$contact = "Contact Name: $contactName \n";
						$contact .= "Email: $email \n";
						$contact .= "Subject: $subject \n";
						$contact .= "Message: $messages \n";
				
						$subject = $contactSubject;
						$headers = 'From: ' . $from . "\r\n" .
								'Reply-To: ' . $sendEmail . "\r\n" .
								'X-Mailer: PHP/' . phpversion();
				
				
						$recipient = $sendEmail;
				
						mail($recipient, $subject, $contact, $headers); 
					}
						
				}
						?>
     <form class="contact_form" action="" method="post" name="contact_form">
        <ul>
            <li>
                 <span class="required_notification">* Denotes Required Field</span>
            </li>
            <li>
                <input type="text" name="contactname" id="contactname" placeholder="Name" required />
            </li>
            <li>
                <input type="email" name="email" id="email" placeholder="Email" required />
                <span class="form_hint">Proper format "name@something.com"</span>
            </li>
            <li>
                <input type="text" name="subject" id="subject" placeholder="Subject"/>
                
            </li>
            <li>
                <textarea name="message" placeholder="Message" cols="40" rows="6" required ></textarea>
            </li>
            <li>
                <button class="primary" name="send" type="submit"></button>
            </li>
        </ul>
	</form>
    <script type="text/javascript">
								$(document).ready(function(){
									$("button.primary").click(function(){
										$(".contact_form").hide();
										$("#success-message").show();
									});
								});
							</script>
    <div id="success-message">
    	<h1>Your message has been sent</h1>
    </div><!--END success-message-->

The jqyery to run the success message is at the bottom of the code

Vermaas

Here, try this: http://jsfiddle.net/savver/KCpuR/

You might wanna check your message before displaying the success message.

cybershot

It didn't work. What is wrong with the success message?

SgtLegend

Using jQuery to display a success message is a bad design as how does your client side code know if the email was sent successfully?

What you need to be doing is using your PHP script to validate the data and check if the email got sent successfully and display a message based on the result.

cybershot

I am using the php to check that it got sent. then I am putting in some jquery to display the success message. I disagree with you that it is bad design as php works very well with html and javascript mixed. Also this is pretty much an accepted practice.

cybershot

I solved it this way


$(document).ready(function(){
	$('#contact_form').html("<div id='success-message'></div>");
	$('#success-message').html("<h1>Contact Form Submitted!</h1>")
	.append("<p>We will be in touch soon.</p>")
	.hide()
	.fadeIn(10, function() {
	 $('#message').append("<img id='checkmark' src='images/sent.png' />");
	});
});

treehouse : what would you like to learn today?

Forums

jquery issues