hide contact form and fade in thank you message
I'm having a very hard time getting this to work with my form. I have looked at this article Show a Thank You message after validating contact form but again I couldn't get it to work for mine.
My form code is
<li id="contact">
<form enctype="multipart/form-data" method="post" action="contact2.php" name="contactform" id="contactform">
<p>Jason Bartimus | Hawaii Wedding Photographer</p>
<h3>What type of session are you interested in?</h3>
<ul>
<li class="msgname"><label>Full Name: </label><input type="text" name="name"></li>
<li><label>E-mail: </label><input type="text" name="email"></li>
<li class="msgname"><label>Contact Number: </label><input type="text" name="phone"></li>
<li><label>Event Date: </label><input type="text" name="date"></li>
<li><label>Event Type: </label><select name="event">
<option>- - - - - - -</option>
<option value="Engagement">Engagement</option>
<option value="Wedding">Wedding</option>
</select></li>
<li><label>Message: </label><textarea name="message" rows=4 cols=35></textarea></li>
<li><input class="send" type="submit" value="Send"></li>
</ul>
</form>
<div id="contactinfo">
<h3>Contact Information</h3>
<p></p>
<p class="phone">808-343-0845</p>
<p class="email"><a href="#">info@jasonbartimus.com</a></p>
</div>
</li>
my php code is here:
<?php
$ToEmail = 'info@jasonbartimus.com';
$EmailSubject = 'Site contact form ';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["name"]."<br>";
$MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>";
$MESSAGE_BODY .= "phone: ".$_POST["phone"]."<br>";
$MESSAGE_BODY .= "date: ".$_POST["date"]."<br>";
$MESSAGE_BODY .= "event: ".$_POST["event"]."<br>";
$MESSAGE_BODY .= "message: ".nl2br($_POST["message"])."<br>";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
I have no clue how to get this to work. Any help would be great!
I have no clue how to get this to work. Any help would be great! trying to use this jquery somehow
$(function() {
var options = {
messages: {
firstname: "Please enter your Name",
lastname: "Please enter your Last Name",
email: "Please enter a valid E-mail Address",
comments: "Please 开发者_JAVA技巧enter your Comments"
},
submitHandler: function(form) {
$(form).ajaxSubmit({
beforeSubmit: function(arr, $form, options) {
$('#myform').fadeOut('fast');
$('#loader').fadeIn('slow');
return true;
},
success: processRegister
});
}
};
//Validation
$('#contactus').validate(options);
$('#ty').hide();
});
function processRegister(responseText, status) {
$('#loader').fadeOut(function() {
$('#ty').fadeIn();
});
}
Reviewing your code, you have no element that is represented by #ty
You can take your current HTML and wrap it in a <section>
or <div>
HTML tag. Like:
<section name="form">
--- all your form html goes here
</section>
And then have your thank you message:
<section name="ty">
--- thank you message
</section>
Use some jquery goodness to hide the thank you section and show it only when the form is submitted ... which then hides the section "form"
- http://api.jquery.com/hide/
- http://api.jquery.com/show/
精彩评论