提交后显示 JS/Ajax 消息


Displaying JS/Ajax message after submit

我有一个我正在使用javascript/ajax设置的表单,以便在提交成功时不重新加载页面。

窗体有效,并显示成功消息。问题是它没有在正确的div 中显示成功消息。我按提交。成功消息应直接显示在 <div id=success> 中指定的窗体上。相反,它显示在顶部。

网页代码:

<form id="contact" name="contact" method="post" novalidate>
    <fieldset>
        <label for="name" id="name">Name<span class="required">*</span>
        </label>
        <input type="text" name="name" id="name" size="30" value="" required/>
        <label for="email" id="email">Email<span class="required">*</span>
        </label>
        <input type="text" name="email" id="email" size="30" value="" required/>
        <label for="Message" id="message">Message<span class="required">*</span>
        </label>
        <textarea name="message" id="message" required></textarea>
        <input id="submit" type="submit" name="submit" value="Send" />
    </fieldset>
</form>
<div id="success"> <span>
                    <p>Your message was sent succssfully! I will be in touch as soon as I can.</p>
                 </span>
</div>
<div id="error"> <span>
                    <p>Something went wrong, try refreshing and submitting the form again.</p>
                 </span>
</div>

JAVASCRIPT 代码:

<script type = "text/javascript" >
/*validate contact form*/
$(function () {
    $('#contact').validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
        },
        messages: {
            name: {
                required: "come on, you have a name don't you?",
                minlength: "your name must consist of at least 2 characters"
            },
            email: {
                required: "no email, no message"
            },
            message: {
                required: "um...yea, you have to write something to send this form.",
                minlength: "thats all? really?"
            },
        },
        submitHandler: function (form) {
            $(form).ajaxSubmit({
                type: "POST",
                data: $(form).serialize(),
                url: "contact_me.php",
                success: function () {
                    $('#contact :input').attr('disabled', 'disabled');
                    $('#contact').fadeTo("slow", 0.15, function () {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor', 'default');
                        $('#success').fadeIn();
                    });
                },
                error: function () {
                    $('#contact').fadeTo("slow", 0.15, function () {
                        $('#error').fadeIn();
                    });
                }
            });
        }
    });
}); 
</script>

当然,还有更多的html代码,因为它被嵌入到一个完整的网页上。我不知道html代码中的任何内容是否会影响它。任何帮助都非常感谢,谢谢!

你的问题出在你的CSS上。你有#success span position: absolute.删除它,它将显示在正确的位置。