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.

If a tag's parent is hidden, even if the tag itself has display:block it will still be hidden. You need to unhide the parent tag as well. — DankMemes
– DankMemes, Commented May 2, 2014 at 11:36

Amir Popovich · Accepted Answer · 2014-05-02 11:35:40Z

1

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>

answered May 2, 2014 at 11:35

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chirag Nagpal · Accepted Answer · 2014-05-02 11:40:43Z

0

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

answered May 2, 2014 at 11:40

Chirag Nagpal

72910 silver badges26 bronze badges

Comments

Sanjeev · Accepted Answer · 2014-05-02 11:42:35Z

0

Change your css as follows :

<style type="text/css">
 #returningdate{
  display:none;
 }
</style>

answered May 2, 2014 at 11:42

Sanjeev

1321 gold badge1 silver badge10 bronze badges

Comments

Hawk · Accepted Answer · 2014-05-02 12:08:19Z

0

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/

edited May 2, 2014 at 12:08

answered May 2, 2014 at 11:39

Hawk

7811 gold badge7 silver badges19 bronze badges

3 Comments

Prashant Over a year ago

hi friends .. why are you add LINK tag ?

Prashant Over a year ago

Hawk Over a year ago

sorry, you can ignore that, there is nothing in that file, the css is on the page itself, is the answer according to what you were looking for?

Sachin · Accepted Answer · 2014-05-02 12:12:07Z

0

<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();

answered May 2, 2014 at 12:12

Sachin

5925 silver badges15 bronze badges

Collectives™ on Stack Overflow

Hide/Show HTML elements using Javascript

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related