Hide/Show HTML elements using Javascript
Question
This is my JS:
function showReturning(){
document.getElementById("returningdate").style.display = 'block';
}
And this is my HTML:
<input type="radio" name="triptype" value="roundtrip" onclick="showReturning()"/><label>Round Trip</label>
<td class="hiddenReturning">
<label>Returning:</label>
<input type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
</td>
And this is my CSS:
.hiddenReturning{
display:none;
}
When I click the radio button, the text box is not being displayed.
5 answers
solution1
1 2014-05-02 11:35:40
The textbox is not hidden, it's the td that wraps it.
Either change the textbox only to be hidden or change the td's style.
This will hide the textbox:
<td>
<label>Returning:</label>
<input class="hiddenReturning" type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
</td>
solution2
0 2014-05-02 11:39:44
i think it is working now. try this
<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
#returningdate
{
display: none;
}
</style>
</head>
<body>
<input type="radio" id="radio" />Click<br />
<td class="hiddenReturning">
<label>Returning:</label>
<input type="text" name="returningdate" id="returningdate" />
</td>
<script>
var getback = document.getElementById('returningdate');
function showReturning()
{
getback.style.display = 'block';
}
var radio = document.getElementById('radio');
radio.addEventListener('change', showReturning, false);
</script>
</body>
</html>
fiddle here http://jsfiddle.net/h_awk/g92ps/
solution3
0 2014-05-02 11:40:43
try This :
HTML
<input type="radio" name="triptype" value="roundtrip" onclick="showReturning()"/><label>Round Trip</label>
<td class="hiddenReturning" id="new_id">
<label>Returning:</label>
<input type="text" name="returningdate" id="returningdate" required="required" placeholder="dd/mm/yy">
</td>
JS
function showReturning()
{
document.getElementById("new_id").style.display = 'block';
}
CSS
#new_id{
display:none;
}
solution4
0 2014-05-02 11:42:35
Change your css as follows :
<style type="text/css">
#returningdate{
display:none;
}
</style>
solution5
0 2014-05-02 12:12:07
<input type="text" name="number" id="id" />
for show and hide
using javascript
document.getElementById("id").style.display="block";
document.getElementById("id").style.display="none";
using css
#id{
display:block;
display:none;
}
using jQuery
$('#id').show();
$('#id').hide();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.