Jquery滑动功能未激活的接触表单脚本

Jquery slide up function not activating in contact form script

本文关键字:接触 表单 脚本 激活 功能 Jquery      更新时间:2023-09-26

一切都在这个联系表单上工作,除了最后一点使用滑动功能将联系表单替换为感谢信息,我似乎无法破解我的解决方案。

你填写表单,点击提交,电子邮件发送,加载gif出现,但幻灯片动画从来没有发生,感谢图片从来没有显示。

<!--CONTACT PANEL-->
<div id="contact-panel">
    <div class="top">: : CONTACT ME : :</div>
    <form id="contactform" method="post">
        <ol class="forms">
            <fieldset>
                <label for="name"><input type="text" name="name" id="name" value="" placeholder="Name:" required minlength="2" /></label>
            </fieldset>
                <p style="margin-top: -10px;"><label for="name" class="error"></label></p> 
            <fieldset>
                <label for="email"><input type="text" name="email" id="email" value="" placeholder="Email:" required /></label>
            </fieldset>
                <p style="margin-top: -10px;"><label for="email" class="error"></label></p>           
            <fieldset>
                <label for="message"><textarea name="message" id="message" placeholder="Question/Comments:" required ></textarea></label>
            </fieldset>
                <p style="margin-top: -5px;"><label for="message" class="error"></label></p>            
            <li class="buttons"><button type="submit" id="submitemail">Send Email &raquo;</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
        </ol>
    </form>
</div>

这是JS…

$(document).ready(function () {
    $("#contactform").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true,
                minlength: 10
            },
        },
        messages: {
            name: {
                required: "*Please enter your name.",
                minlength: "*Your name must consist of at least 2 characters."
            },
                email: "*Please enter a valid email address.",
                message: "*Please, say something at least 10 characters long.",
        },
        submitHandler: function(form) {
            $('#submitemail').hide();
            $("#contactform li.buttons").append('<img src="media/contact/loading.gif" alt="Loading" id="loading" />');      
        $.post('code/form-contact/submitcontactform.php',
        $('form#contactform').serialize(),
        function(data){
            $("#contactform").slideUp("normal", function() {                                                
            $("#contactform").before('<img src="media/contact/contact_thankyou.png" alt="Thank You" id="thankyou" />');     
            });         
        });         
        },      
    })      
    return false;                          
});
我已经尝试了很多不同的方法,但除了猜测和试错之外,我知道的还不够多。欢迎任何帮助。

我对messages json做了如下更改:

    messages: {
        name: {
            required: "*Please enter your name.",
            minlength: "*Your name must consist of at least 2 characters."
        },
        email: 
        {
            email: "*Please enter a valid email address.",
            required: "Please enter email address."
        },
        message: 
        {
            minlength: "*Please, say something at least 10 characters long.",
            required: "Please enter message"
        }
    },

为了使它在小提琴中工作,我不得不删除post call,因为jsfiddle不支持它:

http://jsfiddle.net/shifatullah/v3dTz/16/