For tag the below code is working fine, but for <input> isn't. Can you guide me how to solve it?
html:
<span id="toValue">AND</span>
<input id="toValue">
css:
#toValue {
visibility: hidden;
}
js:
$('#toValue').css("visibility", "visible");
Don't repeat the same id in the same page. Change it to a class:
.toValue {
visibility: hidden;
}
Html:
<span class="toValue">AND</span>
<input class="toValue">
Then:
$('.toValue').css("visibility", "visible");
Demo.
Or use different ids to each element:
<span class="toValue" id="mySpan">AND</span>
<input class="toValue" id="myInput">
Then:
$('#mySpan, #myInput').css("visibility", "visible");
Demo
ids must be unique for elements. the first element with that particular id will always be updated and the other discarded so either use the "class" attribute or change the ids
Id must be unique, Either you can also use class if you want to use common selector, here is demo of simple show and hide of your elements
function func1(){
$("#spanValue").hide();
$("#inputValue").hide();
}
function func2(){
$("#spanValue").show();
$("#inputValue").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanValue">AND</span>
<input id="inputValue" type="text">
<input type="button" onClick="func1();" value="Hide">
<input type="button" onClick="func2();" value="Show">
Same ids to multiple elements in a single page makes an invalid markup and that is hard to work when you try using js with those elements.
For tag the below code is working fine, but for <input> isn't.
It is because:
Browser stops the lookup at first element found and don't go next to look for another one.
NOTE:- If you try check the length of your selector it would always return 1.
Solution to this is that you change the id to class attribute and the css as well:
.toValue {
visibility: hidden;
}
and
<span class="toValue">AND</span>
<input class="toValue">
in js:
$('.toValue').css("visibility", "visible");
Your markup is invalid: two elements with the same id. Use class instead:
HTML
<span class="toValue">AND</span>
<input class="toValue">
CSS:
.toValue {
visibility: hidden;
}
Related
fI am trying to change a label that says "Copies" in this
$(document).ready(function() {
$('.availableLabel.copiedCountLabel').text("Available in Region");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection">
<span class="availableLabel copiesCountLabel">Copies: </span>
<span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">
2
</span>
</span>
How would I go about changing the text "Copies" to "Available in Region".
Maybe, this class is wrong?
.copiedCountLabel
Try to use class .copiesCountLabel as in your html code:
$(document).ready(function(){
$('.availableLabel.copiesCountLabel').text("Available in Region");
});
You have a typo in your selector.
You want to get copiesCountLabel, but trying to get copiedCountLabel.
Also think about using the id attribute for such unique classes.
If you want to select the label with both the classes need to write the selectors together without spaces in between.
In your case it is .availableLabel.copiesCountLabel the classes of label.
$(document).ready(function() {
$('.availableLabel.copiesCountLabel').text("Available in Region ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection"><span class="availableLabel copiesCountLabel">Copies: </span><span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">2</span></span>
One suggestion would be in case if this is the only element which needs to be change then better to use id instead of class
Is there a way to get the value from a div element to textbox?
My script codes
$(document).ready(function() {
barcode.setHandler(function(barcode) {
$('#result').html(barcode);
});
barcode.init();
I show the result with the following code
<div id="result"></div>
I fail to get the div value into the textBox.
<input type="text" id="result">
To achieve expected result, use below option
Avoid using same id for multiple elements , instead of that use class or two different ids or use one as class and for other use as id
$(document).ready(function() {
console.log( $('#result').text())
$('.result').val( $('#result').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">1222</div>
<input type="text" class="result">
code sample - https://codepen.io/nagasai/pen/yjomXp
Ids need to be unique on a given page; your input and div both have the same id. To insert from the div to the input, first get the text inside the div, then apply that to the input using .val().
const foo = $('#foo').text();
$('#bar').val(foo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
This is inside the div
</div>
<input type="text" id="bar"></input>
I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button.
I searched some examples and I found that is possible do something like this:
$(".class").removeClass("choice").addClass("active");
This works for all buttons, but not only for one. I try to change this in
$(this).removeClass("choice").addClass("active");
but this didn't work.
I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/
EDIT
I need the same behavior when i press a second time
Sorry for the basic problem.
Thanks in advance
Regards
I've updated your jsfiddle for a working solution:
https://jsfiddle.net/90u6b3tj/10/
Here's the javascript part:
$(function() {
$("button").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
});
});
as you are adding your click events like so:-
<button id="hourly" class="choice" onclick="change()">Orario</button>
you could use event.target:-
function change(){
event.preventDefault();
$(event.target).removeClass("choice").addClass("active");
}
OR, change your event and pass in this:-
<button id="hourly" class="choice" onclick="change(this)">Orario</button>
so you can do:-
function change(element){
event.preventDefault();
$(element).removeClass("choice").addClass("active");
}
OR better still:-
$('.choice').click(function(e){
e.preventDefault();
$(this).removeClass("choice").addClass("active");
});
and remove the inline click event.
You can use the following code instead.
$(".class").click(function(){
$(".class").addClass("choice");
$(".class").removeClass("active");
$(this).removeClass("choice").addClass("active");
});
Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.
You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.
function change(event){
event.preventDefault();
//$(".choice").removeClass("choice").addClass("active");
$(event.target).removeClass("choice").addClass("active");
}
<div>
<button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>
<div>
<button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>
Should it possible so select more than one item as active?
If not, checkout this:
Markup
<div>
<button id="hourly" class="choice">Orario</button>
</div>
<div>
<button id="daily" class="choice">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice">Mensile</button>
</div>
CSS
.active {
background-color: #A60076;
color: #FF0000;
}
.choice {
background-color: #000000;
color: #FFFFFF;
}
JS
$(document).ready(function() {
$('button').click(function(e) {
$("button").addClass('choice').removeClass('active');
$(this).removeClass('choice').addClass('active');
});
});
Here is a sample fiddle with the above code working.
I am trying to replace three check boxes within an html form with three different images. The idea being that the user can select the pictures by clicking on them rather than clicking on a check box. I've been putting togther some code but can't figure out how to make all the checkboxes selectable. At the moment only the first images works when it is clicked on. Can anyone help me? I'm a real novice with javascript I'm afraid. See fiddle here
The form
<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic1" value=9></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic2" value=12></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic3" value=7></div>
<input type="submit" name="submit" value="Add" />
</div>
</form>
The javascript
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
Why use JavaScript at all? You can do this with CSS, the :checked attribute and a label element.
input[type=checkbox] {
display: none;
}
:checked+img {
border: 2px solid red;
}
<label>
<input type="checkbox" name="checkbox" value="value">
<img src="http://lorempixel.com/50/50/" alt="Check me">
</label>
This is happening because you're using the same ID more than one. IDs should be unique. Instead of using id="blr", try using class="blr". I updated the fiddle:
http://jsfiddle.net/0rznu4ks/1/
First, as Amar said, id should be unique. Use classes for multiple elements.
Also pay attention for semicolons and closing html tags.
To your question:
use the function .siblings() to get the relevant checkbox element.
$('.blr').on('click', function () {
var $$ = $(this);
if (!$$.is('.checked')) {
$$.addClass('checked');
$$.siblings('input.imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$$.siblings('input.imgCheck').prop('checked', false);
}
});
See demo here:
http://jsfiddle.net/yd5oq032/1/
Good luck!
I am trying to make a form with multiple checkboxes. I want to highlight the checkboxes with their content to indicate to the user of the selection
I am using the following layout for my form
HTML
<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>
CSS
.labl{
height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}
jQuery
<script>
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});
</script>
Now when alpha is checked it should change the class of div from labl to chkedbut it is not
You need a DOM ready handler like this $(function(){...});
$(function () {
$("input[type=checkbox]").change(function () {
$(this).parent().toggleClass("chked");
});
});
Documentation
Update
It appears that the checkbox is dynamically added to the DOM so you must use event delegation like this
$(document).on("change","input[type=checkbox]",function () {
$(this).parent().toggleClass("chked");
});
You can pass both the class names to the toggleClass() method, so that only one of the will be applied at a time
jQuery(function(){
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("labl chked");
});
})
Demo: Fiddle
just change your script to
$("input[type=checkbox]").change(function() {
$(this).parents('.labl').toggleClass("chked");
});
And your HTML to
<form>
<div class='labl'>
<input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>
Here is the updated fiddle
http://jsfiddle.net/k242J/
toggleClass functionality is to check the class, if not there it will add, else remove class thats it. its not to change from one class to another.
css
.chked {
background: #4285f4;
}
js
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});