提交后隱藏的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'] )測試用戶是否提交了頁面並相應地更改了聯系表單的類。