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>
<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
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';
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.
With vanilla Javascript
var input = document.getElementById('auto_change_date');
input.style.display = 'none';
or
input.style.visibility = 'hidden';
<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
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);" />
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>
