隐藏联系表格并淡入谢谢你的消息

Question

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="#">[e-mail]</a></p>
                        </div>
                     </li>  

my php code is here:

<?php 
$ToEmail = '[e-mail]'; 
$EmailSubject = 'Site contact form '; 
$mailheader = "From: ".$_POST["email"]."
"; 
$mailheader .= "Reply-To: ".$_POST["email"]."
"; 
$mailheader .= "Content-type: text/html; charset=iso-8859-1
"; 
$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 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();
    });
}

Answer 1

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/