1

I have a form on my page. When the user fills it in and hits submit it then hides the contact form and should display a thank you message.

However i need jquery to rescue me because i dont know enough about PHP to get it working.

I need to check that the form is hidden then create a div with content so the user sees a thank you message. Or add a class of .show to the div so the message appears.

But the main thing is i need to check if the form is hidden.

This is how the html looks when the form is hidden:

<form id="contact_form" action="contact.php" method="post" style="display: none;">
1
  • Can you show us the code that hides the contact form?
    – Eric
    Nov 14, 2011 at 12:21

5 Answers 5

2

You can use is() with the aptly-named :hidden selector.

Assuming the markup of your message element is something like:

<div id="thanks_message" style="display: none;">
    Thank you!
</div>

You can write:

if ($("#contact_form").is(":hidden")) {
    // The form is hidden, show the message.
    $("#thanks_message").show();
}
7
  • i have added the div to the page and set it to display:none; then i want to add a class to that div but it wont add because the html element is hidden
    – PD24
    Nov 14, 2011 at 12:09
  • Why would the <html> element be hidden? Are you referring to the <div> element? Also, since that element is styled with display: none, you might want to call show() on it instead of adding a class. Nov 14, 2011 at 12:11
  • Well i dont want to show the div element by default becase it will say "thank you for the message" on the contact page. I want to hide it then show it with the query.
    – PD24
    Nov 14, 2011 at 12:27
  • That's why you would call show() inside the if statement, if I understand you correctly. I've tried to elaborate on that in my updated answer. Nov 14, 2011 at 12:33
  • 1
    Ah, I see, you mean the message is inside the form? You will indeed have to put it outside if you want to keep the form hidden. Nov 14, 2011 at 12:39
1

Have a look at the :visible selector.

if($('#contact_form').is(':visible')) {
    //do stuff if visible
} else {
    //do stuff if hidden
}
1

You could use JQuery to get value of css attributes, like so:

var displayVal = $('#contact_form').css('display');

And then compare that in an IF-statement. Edit: I like the above solution better.

1

Do this:

//to check if form is hidden
if($("#contact_form").css("display") == "none") {
  //show the div here
}
1

And this is how i did it:

http://jsfiddle.net/7QyBV/2/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.