Expanding on the question here: How to use javascript to swap images with option change?
In accordance with the method in that question of changing an image based on a select option, how would I also change the <a></a> link around the image to mirror the displayed image?
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
example:
<a href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>
Since you are doing multiple things now, it would be better to break that change code into its own function. But basically you need to access the href attribute of the a tag the same way you are accessing the src on the img tag.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
function changeSelect(el) {
document.getElementById('myimage').src = colorUrlMap[el.value];
document.getElementById('link_id').href = colorUrlMap[el.value];
}
</script>
<select name="Color:" onchange="changeSelect(this)">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
example:
<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>
You may notice that I also gave the a an id value.
update
If you need to get that link from somewhere else, here is a possible alternative way to write your script. I added another level of properties to each color item: a src and href to match the attribute names you are updating on the a and img tags.
<script>
var colorUrlMap = {
"Black/White" : {
"src" : "images/taylormade_purelite_standbag_bk.jpg",
"href" : "your link here"
},
//Add more here
"White/Red/Black" : {
"src" : "images/taylormade_purelite_standbag_wrb.jpg",
"href" : "your other link here"
}
};
function changeSelect(el) {
document.getElementById('myimage').src = colorUrlMap[el.value].src;
document.getElementById('link_id').href = colorUrlMap[el.value].href;
}
</script>
update 2
To address the question in the comments about radio buttons, yes. From your code example, currently you have a form submission on the onclick event of the radio. You would need to change that. The trick with radio buttons however, is that you only want to use the value of the selected radio. If you use the onchange event on the radio, it will fire both when it is selected and deselected.
So if you want to use the same function for both radios and selects, you can wrap the setter lines in an if statement:
function changeColor(el) {
if (el.nodeName != "INPUT" || el.checked) {
document.getElementById('myimage').src = colorUrlMap[el.value].src;
document.getElementById('link_id').href = colorUrlMap[el.value].href;
}
}
This should work on select, input[type=radio], and input[type=checkbox]. You can put it in a onclick, onchange, or onkeyup handler. (onkeyup is good when the keyboard is used to change the values.)
Related
How can I select an element on the form and perform click action on it using jQuery? Here's an example for what I want:
If I have many image buttons created on the runtime and here's one of them:
<img class="arrow arrowDown" onclick="toggleMyChildren(this);" alt="" src="/sp.gif" complete="complete" svalue="2"/>
How can I select this element and perform "Click" action on it depending on the value of attribute's (svalue) value?
$(document).ready(function() {
$("img[svalue=2]").on("click", function() {
var attr = $(this).attr("svalue")
alert(attr);
});
});
or if you need attribute on click :
function toggleMyChildren(ooo) {
var attr = $(ooo).attr("svalue")
alert(attr);
}
I am creating a form builder script. I have a select input where the user can select the form element they want to use, depending on their selection ("select", "checkbox" or "radio") another form field is displayed allowing users to input their options.
Users can create as many instances of form elements as they want, so each select input has a dynamically created id that corresponds to the id of the hidden form field. I then use jQuery to determine whether the "options" field should be hidden or not (triggered on change of the form elements select input).
Currently, for every instance, I have the following code addedabove the select input:
<script>
jQuery(document).ready(function($) {
var arr = ['select', 'checkbox', 'radio'];
var thisForm = 'select.input-type-118';
function showHideSelect() {
var val = $(thisForm + ' option:selected').val();
var selectOptions = $('#select-options-118')
if (arr.indexOf(val) >= 0) {
selectOptions.show();
} else {
selectOptions.hide();
}
}
showHideSelect();
$(thisForm).change(function() {
showHideSelect();
});
});
</script>
Where var thisForm and var selectOptions are added dynamically and refer to the select option below this script.
I'm wondering if there is a better way to do this rather than repeat several instances of this, at the moment, a users page cold look like this:
<script>
...
</script>
<select>
...
</select>
<textarea>
This is hidden depending on the select option
</textarea>
<script>
...
</script>
<select>
...
</select>
<textarea>
This is hidden depending on the select option
</textarea>
<script>
...
</script>
<select>
...
</select>
<textarea>
This is hidden depending on the select option
</textarea>
...etc...etc
My concern is that I don't think it's best practice to have so many instances of the same script, but I'm unsure how to write a global script that will allow me to show/hide the textarea on an individual basis.
I have shown a more accurate depiction of my workings on this jsfiddle here:
https://jsfiddle.net/46stb05y/4/
You can use Event Delegation Concepts. https://learn.jquery.com/events/event-delegation/
With this you can change your code to
$(document).on('change','select',function() { //common to all your select items
showHideSelect($(this)); // passing the select element which trigerred the change event
});
This will work even on the select items that are added dynamically
You must change your function to receive the element as the parameter.
function showHideSelect($selectElement) {
var val = $selectElement.val();
var selectOptionsId = $selectElement.attr('class').replace('input-type','select-options');
var selectOptions = $("#"+selectOptionsId);
if (arr.indexOf(val) >= 0) {
selectOptions.show();
} else {
selectOptions.hide();
}
}
Here is the Working JsFiddle
I want to implement a functionality in which, whenever a user checks a checkbox, it will get replace with a check image. For example:
So if I select first option it should get replace with a check image.
I am able to replace the checkbox with image, but this new element looses the ng-click event.
Below is the code:
currentController.changeChoice = function ($event, value) {
if ($event.target.checked) {
currentController.selectedOptions.push(value);
$($event.target).replaceWith('<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png" alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1" /> </div>');
}
else {
var index = currentController.selectedOptions.indexOf(value)
currentController.selectedOptions.splice(index, 1);
}
};
below is the html generated for the new element (image)
<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png" alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1"></div>
If angular way you have to use ng-show(or ng-if) for hide or show image and checkbox depends of the state. They both have to use same on-click callback. Here is the basic idea on pseudocode
<input ng-show="!is_checked" ng-click="callback()" ... />
<img ng-show="is_checked" ng-click="callback()" ... />
I'm a UI Designer working on a multi-page Q&A form, I'm a beginner with jQuery mostly mashing snippets together.
Here's the code: http://codepen.io/covanant/pen/GJZYLq
This part of the form is basically multiple accordions wrapped into tabs, I have most of it working as required but one of the things I need to do, is that whenever I a choice or option, I want to be able to output that option to an element as text right underneath the question.
The element is:
<span class="selected-answer"></span>
You can see it displayed in the first question in the demo, the way that I'd like it to work is that whenever I click the Close All button, it will fadeIn the .selected-answer element and when I click Open All, it will fadeOut the .selected-answer element.
The buttons:
Open All
Close All
jQuery:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
First, it doesn't make sense to give each of your select options the same value attribute. By convention, these should be distinct. If you aren't using the value attribute, you can remove it altogether. Otherwise, you should change it to something like:
<select>
<option value="None Selected">None Selected</option>
<option value="Photocell On">Photocell On</option>
<option value="Off Control Only">Off Control Only</option>
<option value="Photocell On / Off Control Only">Photocell On / Off Control Only</option>
</select>
Once that is sorted out, you need to go up the DOM hierarchy and find the right span element to change.
$('select').on('change', function() {
var span = $(this).closest('div.panel').find('span.selected-answer');
span.text($(this).val());
});
For the checkbox questions, you I would do something like this:
HTML:
<span class="selected-answer">
<ul class="checked-options">
<li data-check="checkbox1">nWifi (nLight)</li>
<li data-check="checkbox2">nLightFixtures</li>
<li data-check="checkbox3">xCella (LC&D)</li>
<li data-check="checkbox4">Daylight Harvesting</li>
<li data-check="checkbox5">xPoint (LC&D)</li>
<li data-check="checkbox6">nWifi (nLight)</li>
</ul>
</span>
CSS:
.checked-options li {
display: none;
}
jQuery:
$('input[type="checkbox"]').on('change', function() {
var checkbox = $(this);
var id = checkbox.attr('id');
if ($(this).prop('checked'))
$('li[data-check="' + id + '"]').show();
else
$('li[data-check="' + id + '"]').hide();
});
As for the fading, this should do the trick:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
Also, depending on whether you want all the questions open or closed by default when the form first loads, you may need to hide all the .selected-answer elements on page load.
Here's the updated codepen.
I agree with VCode on using distinct values for each option in the select elements. But instead of using the value you provide for each option, I think you should use the actual label, that way you can have a more description label, than the option value.
I modified a few of your existing functions to actually populate the selected answer. First I noticed that you already have a function for handling changes to your select - in there I added a small snippet to get the selected answer and pass it to nextQuestion.
$(".panel-body select").change(function() {
var selectElem = $(this);
var answer = selectElem.find("option:selected").text();
nextQuestion(selectElem, answer);
});
Then you also have input elements. Here is your modified input change function:
$(".panel-body input").change(function() {
var inputElem = $(this);
var inputType = inputElem.attr('type');
// common parent for input
var commonParent = inputElem.closest(".panel-body");
var answers = commonParent
.find("input:checked")
.closest("."+inputType)
.find("label")
.map(function(){return this.innerText;})
.get()
.join(", ");
nextQuestion(inputElem, answers);
});
And now as you may have noticed, I added a parameter to the nextQuestion function. I put this code in nextQuestion because you were already accessing the parent there so I wanted to re-use that logic to populate the selected answer.
function nextQuestion(currentQuestion,selectedAnswer) {
var parentEle = currentQuestion.parents(".panel");
if (arguments.length>1) {
parentEle.find('.selected-answer').text(selectedAnswer);
}
if (parentEle.next()) {
parentEle.find(".fa-question").addClass("fa-check check-mark").removeClass("question-mark fa-question").text("");
}
}
Just like VCode mentioned, you can do the fading of the answers using fadeIn/fadeOut
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
// hide all .selected-answers
$('.selected-answer').hide();
Here is a link to your codepen with my modifications: http://codepen.io/anon/pen/ZGpXXK
I've got a Problem. I have a Select Option in HTML
<div id="eilig">
<select id="eiligselect" data-role="slider">
<option value="2" selected="selected">n. Eilig</option>
<option value="1">Eilig</option>
</select>
</div>
On page default "n. Eilig" is selected. After I have made a ajax post request (with "Eilig" selected) the select option should go back to default ("n. Eilig")
I have tried it with $('#eiligselect').val(2); but this only change the value back but the select option shows "Eilig" (but internal value is "n. Eilig".
This select is with a data-role "slider" which emulates a on / off switch like in ios.
So I think I have to click that slider with javascript to change it back instead of just change the value.
Do you have a clue? Thanks.
Try this : put selected attribute for option with value="2"
$('#eiligselect option[value="2"]').attr('selected',true);
Bind the event on change for slider on select value change,
$('#eiligselect').on('change', function() {
var activeLabel = $('span.ui-slider-label');
var mySlider = $(this);
var new2 = 'n. Eilig';
var new1 = 'Eilig';
if(mySlider.val() == 1) {
activeLabel.text(new2);
} else {
activeLabel.text(new1);
}
mySlider.slider( 'refresh' ); // .trigger( 'create' )
});
This Code may help you solving your problem,
var eiligselect = $("#eiligselect")[0];
eiligselect.seletedIndex = 0;