jQuery show/hide issue

Hide form on initial page load, but show on submit.

[doodlebee]

Hello all -

I'm really stuck on this issue. I'm using a 3rd party plugin for WordPress to create a form. It's a PHP-based form, so all content entered through the form is submitted, run through the PHP script to validate, and the form page is reloaded to return either an error message, a preview, or a "thank you for your submission" message. Pretty standard stuff.

The problem is that I need the form itself to be hidden when the page initially loads, and when a button is clicked, the div holding the form will expand. If the form is submitted, the process happen, and the end user is returned to the form (thank you, error or preview) with the div *opened*.

Now, I can get the form to hide onload just fine. I can get the button to toggle and show/hide the div just fine. But I cannot, for the life of me, figure out how to pass to the jQuery that the form has been *submitted* and the div needs to stay open.

This is what I have thus far for the jQuery:

function initShowHide () {
jQuery('#slickbox').hide(); // hide form on page load

jQuery('a#slick-toggle').click(function() { // make "submit" button show and hide on click
 jQuery('#slickbox').toggle(400);
 return false;
});

jQuery(form).submit(function() { // make form stay open if submitted
 jQuery('#slickbox').show();
 return false;
});
};

that last part (the "jQuery(form).submit(function()" part) is my sad gazillionth attempt to make this work. The remaining part works exactly how it should. part of me wonders if the reason it's not working for for two things:

1) I have the form wrapped in a div. the *div* is what's showing and hiding - not the form itself. Would it be better (and most likely work) if I make the *form* show hide, rather than the div that encompasses it?

2) Would it work if I put in an extra hidden field that passes a value, and if the value is set, then the form stays open? (and if so - I have *no clue* how to write that!)

Any help would be appreciated!

[JAB Creations]

The problem is that you've considered jQuery a replacement for JavaScript. 99% of what people want from jQuery works fine in older browsers.

document.getElementById('slickbox').style.display='none';

...or if you're using CSS classes...

document.getElementById('slickbox').className.='hidden';

- John

[doodlebee]

Thanks :)

But, actually, the problem is that when the form is submitted, it returns hidden. I have no problem actually *hiding* it (or making it show). My issue is making it show when the page returns after submission. I want it to be hidden when the page loads up - but if the form is submitted and the user is returned to the form, I want the form to show.

document.getElementById() simply points to the element in question and makes it do what you want (in your examples, it's hiding it by ID or class), it doesn't tell the script whether or not the page has just been loaded or if it's been submitted.

[astupidname]

1) I have the form wrapped in a div. the *div* is what's showing and hiding - not the form itself. Would it be better (and most likely work) if I make the *form* show hide, rather than the div that encompasses it?

I would leave it in the div and work with the div.

2) Would it work if I put in an extra hidden field that passes a value, and if the value is set, then the form stays open? (and if so - I have *no clue* how to write that!)

I guess this would be my take on it, something to this effect is what you want?:

//the form stuff has been validated in the php before here...
//with $showTheForm (Boolean -php variable) representing whether or not you want to show the form div..
<script type="text/javascript">
 var showForm = <?php echo ($showTheForm) ? 'true' : 'false'; ?>;
</script>

function initShowHide () {
    if (!showForm) {
        jQuery('#slickbox').hide(); // hide form on page load
    }