CODEWITHSUNDEEP
javascripthtml
charlie
charlie

Reputation: 1384

Javascript div .hide function

I have a text input with an id of auto_change_date and i am trying to hide it on page load using:

$(document).ready(function(){
    $("#auto_change_date").hide();
});

but its just not hiding it

i am then using this code to make it display (.show) when a select option is selected:

<script type="text/javascript">
$('#status').on('change',function(){
    if( $(this).val()==="Auto Change"){
    $("#auto_change_date").show()
    }
    else{
    $("#auto_change_date").hide()
    }
});
</script>

Upvotes: 0

Views: 93

Answers (7)

Jigar Panchal
Jigar Panchal

Reputation: 11

Add html input type = "text" with id = "auto_change_date"

<input type="text" id="auto_change_date" />

Now add following javascript function:

$(document).ready(function(){
    $("#auto_change_date").hide();
});

Its Working fine for me.

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10896

simply try something like this

    <input type="text"  id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />

your javascript code should be like this

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('#status').on('change',function(){
            if(this).value ==="Auto Change" ){
                $("#auto_change_date").show();
            } else {
                $("#auto_change_date").hide();
            }
        });
    });
</script>

Upvotes: 0

Satish Sharma
Satish Sharma

Reputation: 9635

<input type="text" name="auto_change_date" onclick="ds_sh(this);" />

you are missing here id

put it as follows

<input type="text" name="auto_change_date"  id="auto_change_date" onclick="ds_sh(this);" />

now your jquery will work fine

See Fiddle

Upvotes: 1

Nish
Nish

Reputation: 325

You are not defining id to element and you should add jquery js to work this.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Html : 

<input type="text" id="auto_change_date" name="auto_change_date" onclick="ds_sh(this);" />

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

 <style>
    .hidden{
        display:none;
    }
</style>


<script type="text/javascript">
$(document).ready(function(){
$('#auto_change_date').addClass('hidden');
$("#auto_change_date").hide();
});
</script>

the div should be made display:none at first inorder to apply this

Upvotes: 0

Kostis
Kostis

Reputation: 1105

With vanilla Javascript

var input = document.getElementById('auto_change_date');
input.style.display = 'none';

or

input.style.visibility = 'hidden';

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Nothing is wrong with Your jQuery. But I would suggest you to use Pure CSS

<style>
    #auto_change_date {
        display:none;
    }
</style>

OR, Simple JavaScript

  document.getElementById('auto_change_date').style.display = 'none';

Upvotes: 1

Related Questions