开发者

hide contact form and fade in thank you message

开发者 https://www.devze.com 2023-03-15 06:14 出处:网络
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.

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/
0

精彩评论

暂无评论...
验证码 换一张
取 消