I'm trying to hide/show input and div based on Input value.
The code below isn't working:
HTML:
<div>
<span class='just-show'>Show This Label</span>
<input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>
JS
$(document).ready(function () {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
return false;
});
How to hide the element without event (ex: click) ? Just on ready function.
You can use
$(document).on('change', 'input', function() {
// Does some stuff and logs the event to the console
});
Or
$("input").change(function(){
// Does some stuff and logs the event to the console
});
Where input is Input identifier like your .for-input
Your desire Jquery code:
$(document).on('change', '.for-input', function() {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
});
Example:
$(document).ready(function () {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
//return false;
$(document).on('change', '.for-input', function() {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<span class='just-show'>Show This Label</span>
<input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>
You can set the css property to display none.
$('.for-input').css('display', 'none');
Related
I am new to jQuery.
I am trying to make a switcher using a checkbox. At the moment I have gone this far
$(function() {
$('input.cbx').on('change', function() {
if ($(this).prop("checked", true)) {
$('body').addClass('dark');
} else if ($(this).prop("checked", false)) {
$('.body').addClass('light');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dn" type="checkbox" class="cbx hidden" />
<label for="dn" class="lbl"></label>
As you can see the checkbox stay checked after the first click, I imagine is a noob situation but, can you help me please?
You are actually setting the checked property instead of getting.
$('input.cbx').on('change', function() {
if($(this).prop("checked") == "true")
{
$('body').addClass('dark');
} else if($(this).prop("checked") == "false")
{
$('.body').addClass('light');
}
});
You can use this.checked or $(this).is(":checked") instead of $(this).prop("checked")
$('input.cbx').on('change', function() {
if(this.checked)
$('body').addClass('dark');
else
$('.body').addClass('light');
});
You can also use toggleClass
$('input.cbx').on('change', function() {
$('.body').toggleClass('light');
});
Note: I could not see any element with class body? You probably need to assign class to label. If you want to apply the toggle effect to body then remove dot
Live Demo
HTML
<body class="cbx">
<input id="dn" type="checkbox" class="cbx hidden"/>
<label for="dn" class="lbl">123</label>
</body>
Javascript
$('input.cbx').on('change', function() {
$('body').toggleClass('light');
});
$('input.cbx').on('change', function () {
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
DEMO
You can check if the checkbox is check using $(this).is(":checked")
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
In the HTML shown below, I want to display input after click on "ورود" and hide it when I click outside it's parent <div>.
HTML
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible
<input type="text" value="name">
</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
here's my fiddle : fiddle
You can use jQuery closest() method as follows:
$(document).on("click", function (e) {
if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
$("#user-login-wrapper").removeClass("wide");
}
});
Updated Fiddle
Or If you can move #user-login-top to the parent of input you can simply do:
$(document).on("click", function (e) {
if (!$(e.target).closest("#user-login-wrapper").length)
$("#user-login-wrapper").removeClass("wide");
});
Well you have put the logic for all the targets except the text box that is wrapped in user-login-wrapper, So just add it with your logic and it works
Example:
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper")==false
&& $(e.target).is('#user-login-top')==false
&& $(e.target).is('#user-login-wrapper *')==false) {
$("#user-login-wrapper").removeClass("wide");
}
});
Demo Fiddle
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
I am having a problem with checkboxes. I have a series of photos in a form. Each photo has a checkbox. If a photo's checkbox is checked, a div associated with the photo is revealed using .show().
That works fine, and I am able to submit the form. However, if I press "back" on the browser to go back to the set of photos, the checkboxes are still checked, but the div associated with it is no longer visible.
What do I need to do in order to make sure the the checked photos still have visible divs even when going "back" to the page?
$(document).ready(function () {
$(':checkbox').change(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
and the form is something like this:
<form>
<input name="box1" id="box1" type="checkbox" />
<input name="box2" id="box2" type="checkbox" />
<input name="box3" id="box3" type="checkbox" />
...
</form>
Try displaying the images for checked divs on page load, i.e. something like:
$(document).ready(function () {
$(':checkbox').change(function() {
// ... your code ...
});
$(':checkbox').each(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
Cleaner Version
$(document).ready(function () {
$(':checkbox').change(function() { checkImage($(this)); });
$(':checkbox').each(function() { checkImage($(this)); });
});
function checkImage(_checkBox) {
var dataID = _checkBox.attr("id");
if(_checkBox.is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
}
Do something like this:
$(document).ready(function() {
$(':checkbox').change(function() {
ToggleContent($(this));
});
$(':checkbox').each(function() {
ToggleContent($(this));
});
function ToggleContent(chkbox) {
var dataID = chkbox.attr("id");
if (chkbox.is(':checked')) {
$("#content" + dataID).show();
}
else {
$("#content" + dataID).hide();
}
}
});