提交后隐藏的jQuery联系人表单

Question

我有一个联系表单，该页面在加载时会隐藏。 然后，可以通过单击“联系表单”按钮来查看该联系表单，以使其向上滑动和向下滑动。 问题在于，提交表单后，页面会刷新，并且如果由于重新加载页面而隐藏了错误消息或成功消息，则该页面将被隐藏，您必须单击“联系表单”按钮才能看到它。 我对jquery或php不太满意。 任何帮助将非常感激。 提交表单后，我需要显示消息。

该网站是http://www.carlisleironing.co.uk/index.php

我的jQuery是

$(document).ready(function () {
    $("#contactLink").click(function () {
        if ($("#contactForm").is(":hidden")) {
            $("#contactForm").slideDown("slow");
        } else {
            $("#contactForm").slideUp("slow");
        }
    });
});

Answer 1

添加以下内容（在最后一个});之前}); 在您的问题中）：

if ($('#contactForm #error').size() > 0){
    $('#contactForm').slideUp('slow'); // or just .show();
}

测试是否存在#error元素，如果存在，则显示表单。 我不确定您的成功消息是什么样子，但是类似的测试也可以用于此。

至于其他答案：是的，您可以进行AJAX提交，但是机会（我在这里假设背景）超出了此问题的范围。 这将涉及特殊的请求处理和附加的验证库（y / ies）。

Answer 2

您可以使用ajax提交表单并显示结果，而无需重新加载页面：

$('form').submit(function() {
    $.post($(this).attr('action'), $(this).serialize(), function(data) {
        console.log(data);
    });
    return false;
});

Answer 3

我假设当有人提交表单时，php页面会生成错误，但用户无法看到它们，因为表单默认是在页面加载时隐藏的。

您可以命名“提交”按钮。 如果用户单击“提交”按钮，则该按钮的值将与get或post请求一起发送。 然后，您可以更改php页面的行为，以便在提交表单时不隐藏联系表单。

<input type="submit" name="theSubmitButton" value="Submit!" />

在php中，如果用户提交了表单，则会设置$_GET['theSubmitButton'] （如果使用的是发布请求，则为$ _POST）；如果不是这种情况，则不会设置。 您可以使用isset( $_GET['theSubmitButton'] )测试用户是否提交了页面并相应地更改了联系表单的类。