I want to have a background image depending on the checked radio button, using a switch case. However I'm not finding the right solution to get the value from the checked radio button.
Snippet of my code:
HTML:
<section class="configurator__product">
...
</section>
<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">
There's more inputs, 5 in total, hence the reason I don't think using if/else is optional. But I hope it gets clear with the amount of code I'm giving here.
JavaScript:
const changeTotebagColor = () => {
let totebagColor = document.getElementsByName(`color-totebag`).value;
const $totebagImg = document.querySelector(`.configurator__product`);
switch (totebagColor) {
case `tote-blue`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
case `tote-green`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
case `tote-black`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
}
}
changeTotebagColor();
I hope it's a bit clear to what I'm trying to figure it out. I'm new to JavaScript, so maybe I'm doing this all wrong. I've tried numerous solutions online, however I had no luck. I would also like to avoid in-line JavaScript if possible, but I'm open to any solution at this point.
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
I am using the following code to route click events on an img tag to an input radio below it. The code works perfectly on Chrome and other browsers, but on IE (specifically IE 11) I must double click to get the radio selected instead of just single click to get the radio input selected. Can someone please tell me what I am doing wrong, missing here? Thanks
<script type="text/javascript">
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').trigger('click');
});
});
</script>
<div class="imagesPrev col four center">
<label class="label_radio images" for="radio1">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
<input type="radio" id="radio1" name="radio1" value="image1"/>
</div>
<div style="height:10px;"></div>
Image Title <br/>
</label>
</div>
Notes:
- I also noticed that I don't have to double click as normal double click, but it has to be two clicks. Meaning one click then I can wait for like 10-15 seconds then do the 2nd click to get the click event routed to the radio input.
http://jsfiddle.net/89wTk/
You should use .prop(); when dealing with checkbox/radio inputs.
$(document).ready(function() {
$('#Img1').click(function() {
var checkBox = $("#radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
});
Have you tried using a label tag with a for attribute for this feature instead, this could solve your problem and be more browser compatible.
<label for="radio1"><img id="Img1"src="image1.gif" alt="Image 1" /></label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
I can understand if this doesn't achieve what you need, but using this method should work using HTML markup instead of jQuery
relatively horrible jsfiddle demoing this:
http://jsfiddle.net/andyface/d25KS/
I remember that some version of IE don't support clicking objects other than links or buttons :(
Perhaps try using:
$("#radio1").checked(true);
or
$("#radio1").selected(true);
as a work around
Just simple, you don't have to use any Jquery for this, just keep everything inside the label:
<label for="radio_btn">
<img id="img"src="image1.gif" alt="Image here" />
<input type="radio" id="radio_btn" name="radio1" value="image1"/>
</label>
Working here: http://jsfiddle.net/fals/3phf4/
Your code example works fine in IE11 (desktop and metro). Is it possible that there is another click event on the page that is capturing and preventing the click event on the image? Maybe something is causing the page to lose focus (first click gets window focus second clicks the image)? Try putting an alert in the click function to see if the click is getting registered. If that's not the issue, try running the body of the function in the console to see if that is the issue. You might try other ways to trigger the event, as suggested by others. Or try the jQuery .triggerHandler("click") method.
I think your problem may be with your markup. You have your image and click events inside a label.
According to w3schools:
"...if the user clicks on the text within the element, it toggles the control."
http://www.w3schools.com/tags/tag_label.asp
That toggle is perhaps messing with your javascript. Try moving the markup outside of the label and see if that helps.
That's an easy one :).
The #img1 is encapsulated inside the
<label class="label_radio images" for="radio1">
So, without the jQuery part it's already working. Now when having the jQuery part, a single click will become a double click:
1) 'for' element of label_radio
2) the trigger in jQuery part
So, for x-browser, you should not wrap the img inside the label.
Or try to cancel the event in $('#Img1').click(function(event) { ...
You have both your img and radio wrapped in label.
HTML's default behavior is that click on label triggers radio/checkbox inside.
There are two ways you can solve your problem:
Remove javascript function altogether.
If there's additional reason for javascript, change your html markup, and move radio outside of the label. Also remove for attribute, cause it triggers radio selection. Something like this:
<div class="imagesPrev col four center">
<label class="label_radio images">
<div class="labelText">
<img id="Img1"src="image1.gif" alt="Image 1" />
</div>
</label>
<input type="radio" id="radio1" name="radio1" value="image1"/>
<div style="height:10px;"></div>
Image Title
</div>
<script type="text/javascript">
$(document).on('click','.Img1',function()
{
var checkBox = $(".radio1");
checkBox.prop("checked", !checkBox.prop("checked"));
});
</script>
<img class="Img1" src="image1.gif" alt="Image 1" />
<input type="radio" class="radio1" name="radio1" value="image1"/>
I am facing the same issue and its very weird .... the workaround that is working for me is that instead of using the trigger function .. put the code which is executed in the trigger click event in a javascript function and call that function instead of trigger event ... example is given below.
For this example i will use an alert in case of a click on the element with id radio1.
Event definition
$('#radio1').on('click',function () {
alert("Hi");
})
So Instead of using $('#radio1').trigger('click'); we can put the alert in a javascript function and call the javascript function where ever i am calling the trigger click event.
Javascript function
function triggerClick(){
alert("Hi")
}
and just call this function(triggerClick()) where ever you are using $('#radio1').trigger('click');
Please let me know if this is helpfull
Try to use .click() instead of .trigger('click'):
<script>
$(document).ready(function() {
$('#Img1').click(function() {
$('#radio1').click();
});
});
</script>
it should work, see here for more info
The following code was a reply to a question posted last year. It’s the best example I can find to want I am looking to do. I have HTML knowledge but my JS is limited – thanks for your patience. You can view the code here. The thread can be found here.
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
How can I get multiple images to display when a checkbox has been clicked? The images would be the same, position different.
When the images are displayed I would like to have a onclick event or mouseover that would display additional info– what is the best option for this, JS or image map (hotspots)?both? I’ve used hotspots before but only by itself not with JS. Any advice on this would be appreciated.
The following link is an example of what I am trying to achieve but on a smaller scale. http://www.cozumel.travel/learn/map.cfm
If you want to use the same code but for multiple images, you can add a function that would toggle every image you defined for the onChange event.
here is a function that would do:
function toggleMultiVisibility (a){
for (var i = 0; i < a.length; i++){
toggleVisibility(a[i]);
}
}
and here is the change you should do on the HTML:
onChange="toggleMultiVisibility(['imgemployment','imgpopulation']);"
here is a working example from your code: http://jsfiddle.net/Pu2E7/
This post is linked to my previous one.
I was able thanks to Pointy's answer to use properly RemoveClass with MooTools but unfortunately I still have a problem : even after removing the class from the HTML element the HTML element still has an empty class (class="").
I'm wondering if there's a way to avoid this and to remove completely the class.
my code :
<script type="text/javascript">
window.addEvent('domready', function(){
$('votconj').addEvent('click', function() {
$('first_name_conjoint').addClass("validate['required','nodigit']");
$('last_name_conjoint').addClass("validate['required','nodigit']");
$('jj_conjoint').addClass("validate['required']");
$('mm_conjoint').addClass("validate['required']");
$('aaaa_conjoint').addClass("validate['required']");
$('conjoint_regime').addClass("validate['required']");
new FormCheck('formulaire');
});
$('votconj_no').addEvent('click', function() {
$('first_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
$('first_name_conjoint').removeProperty('class');
$('last_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
$('last_name_conjoint').removeProperty('class');
$('jj_conjoint').removeClass("validate\\['required'\\]");
$('jj_conjoint').removeProperty('class');
$('mm_conjoint').removeClass("validate\\['required'\\]");
$('mm_conjoint').removeProperty('class');
$('aaaa_conjoint').removeClass("validate\\['required'\\]");
$('aaaa_conjoint').removeProperty('class');
$('conjoint_regime').removeClass("validate\\['required'\\]");
$('conjoint_regime').removeProperty('class');
new FormCheck('formulaire');
});
new FormCheck('formulaire');
});
</script>
radio button code
<label>Conjoint :</label>
<input type="radio" name="votconj" id="votconj" value="oui" onclick="affich_conj();">oui
<input type="radio" name="votconj" id="votconj_no" value="non" checked="checked" onclick="affich_conj();">non
Use removeAttribute provided by JavaScript itself. It will completely erase the attribute from the tag:
Hay
<script>
var link = $('link');
link.removeAttribute('class');
console.log(link); // <a id="link" href="">
</script>
Example: http://jsfiddle.net/LDBUy/
You should be able to use the .removeProperty() method to remove the class attribute.
http://mootools.net/docs/core/Element/Element#Element:removeProperty
Their example:
HTML
<a id="myAnchor" href="#" onmousedown="alert('click');"></a>
JavaScript
//Eww... inline JavaScript is bad! Let's get rid of it.
$('myAnchor').removeProperty('onmousedown');
Resulting HTML
<a id="myAnchor" href="#"></a>
Just swap 'onmousedown' for 'class' in your own code and you should be golden.
EDIT: I updated the jsfiddle from your other question with an example of this (removing the red color from the header) and it works fine. Can you post more of your code to see if the problem is elsewhere?
http://jsfiddle.net/FrT6V/1/
I'm looking for a jQuery image picker plugin that allows me to do the following:
Display a group of images and let the user select one (and only one) by clicking it
If the user does not like any of the specified images, he should be able to upload his own
Just #1 would suffice, as I can add the code for #2 if necessary
It's not that difficult to do I know, but if there is a standard plugin that people use for this, I'd rather use that than reinvent the wheel.
I know this has already been answered but I actually developed a library that address the first problem. You can check it out here:
http://rvera.github.com/image-picker/
Something like this? i dont know if there is plugin but is seems really simple
// HTML
<div id="image_container">
<img src="blabla" />
<img src="blabla" />
...
</div>
<form ...>
<input id="image_from_list" name="image_from_list" type="hidden" value="" />
<input id="image_from_file" name="image_from_file" type="file" />
</form>
// JS
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});
Have you tried this:
https://code.google.com/p/select-to-image-picker-jquery/
It lets you to change select box into image picker based on JQueryUI modal box.
I was looking for something like this a long time and finally needed to develop it by myself. So maybe you will find useful too.