show a hidden div on reload after submit_form button click

Question

I need to show a div upon page reload after the user clicks on the submit form button.

Specifically, I have a PHP contact form in a show/hide div. Clicking on contact shows and hides the contact form. Both the show/hide js and the php contact form work perfectly. When the user clicks submit -- the page reloads and the "message sent" is written in the contact form div. But when the page reloads, the form is in a div set to display: none; in the CSS -- which is how the page loads on default.

Upon submit, I need the page to reload and show the contact form in the hidden div. I'm not exactly sure where to start since all the javascript for the page reloads to default. Also since it's all PHP I can't set or call an anchor in the content_form div.

Thanks!

Answer 1

You can use some PHP code to write a script only if the form was sent successfully.

Then just echo a JavaScript to set the element display to block (similar to the following PHP code):

if($form_is_valid)
{
    echo '<script type="text/javascript">'
       . 'document.getElementById("elementID").style.display = "block";'
       . '</script>';
}

Answer 2

I would prefer a CSS solution over a JS one.

if ($form_is_valid)
    echo '<style type="text/css">#contact { display: block; }</style>';

Edit: Just to make things a little cleaner, I would suggest adding a class to your form if it was submitted successfully. Something like this:

$class = $form_is_valid ? ' class="submitted"' : '';
echo '<form method="..." action="..."' . $class . '>...</form>';

Then, you could just do a CSS definition that comes after the display: none; definition, like so:

form.submitted { display: block; }

Answer 3

Breakthrough's answer should work fine, but I personally don't like putting any kind of success or error message in the markup, even hidden by CSS, if it's not really the case at the time of the page load. Since the page is reloading anyway, doing this would eliminate the need for any JavaScript or CSS at all to resolve this:

<?php if ($form_is_valid) include('SnippetFileWithSuccessMessageDivInIt.php') />

Answer 4

If you the form is loaded with the submitted content, you can use javascript to detect the presence of text in the input fields. If any content is present, set display: block.

Answer 5

what if the page has some error and need to resubmit? I need to show the hidden field that is not empty after clicking the submit button and there is an error on the second page. How can I do that? I tried to use the if..then such as

var honor = document.getElementById('donate_honor_name'); var acknowledgement = document.getElementById('donate_honor_acknowledgement'); if (( honor.style.display != 'none' ) && ( acknowledgement.style.display != 'none' )) { honor.style.display = 'none'; acknowledgement.style.display = 'none'; } else { honor.style.display = ''; acknowledgement.style.display = ''; } but it doesn't work? I need some idea how to do it then maybe I can fix it myself. Thanks.