JavaScript OnClick div reveal

Question

I have a simple page with a form. When the submit button is clicked a div should reveal to show some 'thank you' content.

I'm using the following script:

function foo(id){
    var e = document.getElementById(id);
    if (e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

And the following on the submit button:

onclick="foo('bar');"

It does reveal the div, however, it only flashes up and then disappears again. I need it to remain on the page so that it can be read. Any ideas why its not persisting?

Answer 1

When your form is submitted a page refresh is triggered making the div start of as display: none; again.

Returning false from your function will prevent the form from submitting and your div to "persist", you would however still need to submit the form using ajax.

Answer 2

It may be easier to do it when generating the HTML on the PHP side (or what do you use). If the send is made, simply add the "Thank you" block.

<?php
if ($submitted)
{
    echo '<span>Thank you</span>';
}