CODEWITHSUNDEEP
javascripthtmlcss
HelmBurger
HelmBurger

Reputation: 1298

Hide/Show HTML elements using Javascript

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.

Upvotes: 0

Views: 116

Answers (5)

Sachin
Sachin

Reputation: 582

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

Upvotes: 0

Hawk
Hawk

Reputation: 783

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/

Upvotes: 0

Sanjeev
Sanjeev

Reputation: 132

Change your css as follows :

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

Upvotes: 0

Chirag Nagpal
Chirag Nagpal

Reputation: 729

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

Upvotes: 0

Amir Popovich
Amir Popovich

Reputation: 29846

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>

Upvotes: 1

Related Questions