2

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?

k0pernikus
  • 60,309
  • 67
  • 216
  • 347
gugogu
  • 31
  • 1
  • 1
  • 5
  • 1
    @Jennifer This question is not about jQuery. – k0pernikus Jul 23 '15 at 12:27
  • as you do it on submit button click then defiantly your page goes refresh...if your page refresh then you get again load your page. – Yogesh Jagdale Jul 23 '15 at 12:30
  • you can refer this link : http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript – Jen Jul 23 '15 at 12:31
  • 3
    To everyone, stop posting random "solutions" since his own code actually works. So stop going for jQuery or even other JS 'fixes' since that is actually not even the problem. Good chance his page reloads or that other code is breaking this part of the code. – W van Rij Jul 23 '15 at 12:39

3 Answers3

6

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>
Lyndsey Browning
  • 221
  • 1
  • 6
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)

W van Rij
  • 536
  • 2
  • 16
0

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.

Dietz
  • 578
  • 5
  • 14