How to show hidden div after hitting submit button in form?

Question

I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.

Answer 1

It should work.

<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">

<div id="my_id" style="display: none"> My text </div>

Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)

Answer 2

Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.

The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.

Answer 3

Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.

If this is the case, try changing the input type to button to see the effect.

For example:

#my_id {
    display: none;
}

<form>
    <input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
    <div id="my_id"> My text </div>
 </form>