Reputation: 31
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
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
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
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