Jquery contact form hiding after submit

Question

I have a contact form which is hidden when the page loads. The contact form can then be viewed by clicking the contact form button, causing it to slideUp and slideDown. The problem is that when the form is submitted the page refreshes and if there is an error message or a success message it is hidden because the page has reloaded, you have to click on the 'contact form' button to see it. I'm not great with jquery or php. Any help would be much appreciated. Once the form is submitted I need the messages to appear.

the website is http://www.carlisleironing.co.uk/index.php

My jquery is

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

Answer 1

add the following (just before the last }); in your question):

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

Test if the #error element is present and, if so, show the form. I'm not sure what your success message looks like but a similar test can also be one for that.

As for the other answers: yes, you can do an AJAX submit but chances are (and I'm assuming context here) that's out of the scope of this question. That would involve special request handling and additional validation librar(y/ies) added.

Answer 2

You can use ajax to submit the form and show the result without reloading the page:

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

Answer 3

I am assuming that when someone submits the form, the php page generates the errors, but the user is not able to see them, because the form is hidden by default on a page load.

You can name the submit button. If the user clicks the submit button, the value of the button is send with the get or post request. You can then change the behaviour of your php page to not have the contact form hidden if the form was submitted.

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

In php $_GET['theSubmitButton'] (or $_POST if you are using a post request) will be set if the user submitted the form, and it will not be set if that was not the case. You can use isset( $_GET['theSubmitButton'] ) to test if the user did submit the page and alter the class of the contact form accordingly.