CODEWITHSUNDEEP
javascript
gugogu
gugogu

Reputation: 31

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

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.

<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>

How can I make it work?

Upvotes: 2

Views: 17442

Answers (3)

Dietz
Dietz

Reputation: 578

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.

Upvotes: 0

Lyndsey Browning
Lyndsey Browning

Reputation: 221

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>

Upvotes: 6

W van Rij
W van Rij

Reputation: 536

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)

Upvotes: 1

Related Questions