This seems like a simple problem, but I don't get why it's not working for me. I have a dropdown menu and image. The image changes based on what is selected in the dropdown menu, but I don't understand why my function isn't being triggered.
<select onchange="changeImage()" id="samples">
<option value="Cpp">C++ Example</option>
<option value="Mobile">Mobile Applications Example</option>
</select>
and the javascript
<script>
function changeImage()
{
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if(selection.value == "Cpp")
{
image.src="images/CppCoursesCapture.JPG";
}
else if(selection.value == "Mobile")
{
image.src="images/MobileQuizCapture.JPG";
}
}
</script>
The function doesn't change the image though
EDIT: missed some perenthesis
A lovely jsbin.com demo
You should take a less obtrusive approach
<select id="samples">
<option value="Cpp" data-image="images/CppCoursesCapture.JPG">C++ Example</option>
<option value="Mobile" data-image="images/MobileQuizCapture.JPG">Mobile Applications Example</option>
</select>
Then in JavaScript
// implementation
function updateImage() {
var selected = this.options[this.selectedIndex];
var image = document.getElementById("shown");
image.src = selected.getAttribute("data-image");
}
// target SELECT
var elem = document.getElementById("samples");
// change event
elem.addEventListener("change", function(event){
updateImage.call(this);
});
// initialization
updateImage.call(elem);
You need to wrap your conditions in parenthesis:
if (selection.value == "Cpp")
..and...
else if (selection.value == "Mobile")
If you run your developer tools, it will pick up that your syntax is incorrect.. and breaking the script.
function changeImage()
{
alert("Function Called");
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if (selection.value == "Cpp")
{
image.src="images/CppCoursesCapture.JPG";
}
else if( selection.value == "Mobile")
{
image.src="images/MobileQuizCapture.JPG";
}
}
forgot brackets ?
Thanks for the help guys, my issue was the->
if selection.value = cpp
instead I missed the parenthesis and quotations
if(selection.value = "cpp")
I suggest storing the path to the image as the value for the option and using that to change the image src. The following shows how to do this for a background image but it can be easily adapted for an image tag.
The advantage of doing it this way is that you can simply add more options to the select and they will work without needing to modify the javascript.
set background image from dropdown menu - javascript
<select id="samples">
<option>Select an image</option>
<option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">C++ Example</option>
<option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Mobile Applications Example</option>
</select>
<img id="image" />
$(document).ready(function()
{
var image = $('#image');
$('#samples').bind('change', function(event){
var img = $(this).val();
if(img == null || typeof img === 'undefined' || $.trim(img) === '')
image.removeAttr('src');
else
image.attr('src', img);
});
});
Here is a JS fiddle illustrating how to do this for your purposes:
http://jsfiddle.net/hKBtp/5/
Try this fiddle:
http://jsfiddle.net/yQBz7/1/
<script>
function changeImage()
{
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if(selection.value == "Cpp")
{
image.innerHTML="<img src='http://www.techiesin.com/wp-content/uploads/2013/07/c-logo.jpg' />";
}
else if(selection.value == "Mobile")
{
image.innerHTML="<img src='http://www.truste.com/blog/wp-content/uploads/MobileAppDevelopments1.jpeg' />";
}
}
</script>
Related
Using print_media_templates i add some settings into wordpress gallery creator that allow me to chose gallery shortcode output (default gallery, masonry, slider) based on additional shortcode parameters.
My code so far :
<?php
add_action('print_media_templates', function(){ ?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<label class="setting">
<span>Gallery Type</span>
<select name="type" data-setting="type" onchange="getval(this);">
<option value="default">Default</option>
<option value="masonry">Masonry</option>
<option value="slider">Slider</option>
</select>
</label>
<div id="slider-settings">
<label class="setting">
<span>Animation</span>
<select id="gallery-type" name="animation" data-settings="animation">
<option value=""></option>
<option value="fade">Fade</option>
<option value="slide">Slide</option>
</select>
</label>
</div>
</script>
<script>
jQuery(document).ready(function() {
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
?>
It's only small part as example since there's much more options to each gallery type. Since there's lot of options i want to display only one corresponding to selected gallery type. In this example i want to display #slider-settings only when #gallery-type select value == "slider".
As for checking select value i found this code:
<script>
function getval(sel) {
if (sel.value == "slider") {
alert(sel.value);
}
}
</script>
with return selected type value (along with onchange="" on #gallery-type select) and display it if it's set to "slider".
But when i want to hide #slider-settings like :
function getval(sel) {
if (sel.value != "slider") {
$('#slider-settings').hide();
}
}
it's not hiding at all.
You have to handle native update function. Update function is fired for each label when a single change is made. (media-views.js line 7232)
var oldUpdate = wp.media.view.Settings.Gallery.prototype.update;
wp.media.view.Settings.Gallery.prototype.update = function(key) {
if( key === "type" ) {
var value = this.model.get( key );
if ( value === "slider" ) {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"block"});
});
} else {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"none"});
});
}
}
// Initialize native code.
oldUpdate.apply(this, arguments);
};
Somehow i managed to get it work by hiding #slider-settings using not jQuery but javascript :
<script>
function getval(sel) {
if (sel.value != "slider") {
document.getElementById('slider-settings').style.display = 'none';
} else {
document.getElementById('slider-settings').style.display = 'block';
}
}
</script>
But to get value it's has to change (since it's onselect=) so first time i display settings it's not hiding. And as i searched there's seems to be not anything like onload= i can use with .
Or is there a way to just reselect it on load ?
I am wondering if i can call another function also pass in if statement instruction within another function.
I need to do it this way, because i am also allowing users to select the value from a select button.
<script>
$(document).one("pageshow", "#testpage", function () {
var status = getURLParameter("status");
var status2 = status.substring(0, status.indexOf('?'));
if (status2 == "ready") {
getComboA(3)
}
});
function getComboA(sel) {
var value = sel.value;
if (value == 1) {
alert("1 is working");
}
if (value == 2) {
alert("2 is working");
}
if (value == 3) {
alert("3 is working");
}
}
</script>
<select name="select-native-1" id="statusselect" onchange="getComboA(this)" style="width: 300px;">
<option value="1" id="radio-choice-h-222">Not Ready</option>
<option value="2" id="radio-choice-h-2a">Sent</option>
<option value="3" id="radio-choice-h-2b">Ready</option>
</select>
The getComboA(3) part isnt working at the moment, it isnt triggering the getComboA
change
var value = sel.value;
to
var value = sel.value || sel;
so if sel.value was undefined it will use sel
The answer that another user provided worked, but that whole answer got deleted. But if i use getComboA({value:3}); it works.
I'm not that familiar with JavaScript. What I was doing so far was to hide a part of my form (see below: "Memo"), when someone changed an input-text-field via onchange (field-name: "ordernumber").
Therefore I'm using this funktion:
<script language="JavaScript" type="text/javascript">
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>
This works pretty fine, but now I'd like to add another condition from a dropdown (select option). In other words: When you change ordernumber AND select a certain option, "Memo" should disappear. I tried a lot, but I can't get it to work properly. This was my latest try:
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}
Two things are not working right with this one: It performs when only one of the conditions is true (although I used &&) and it seems to be unrelevant which option from the dropdown ist selected. Right now it performs with every option, but it should only perform with "sys1".
BTW: I added onchange="javascript:takeawayfield()" to both of the affected form-elements (input text and select option). I guess that's right?
What am I doing wrong?
Thanks in advance!
EDIT:
Here are the html-tags:
<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">
<select name="system" id="system" onchange="javascript:takeawayfield()">
<option value="sys1">System 1</option>
<option value="sys2">System 2</option>
<option value="sys3">System 3</option>
</select>
Try this:
var dok = 0,
initialValue = "",
ordernumber = null,
system = null,
memo = null;
window.onload = function() {
// get dom objects
ordernumber = document.getElementById("ordernumber");
system = document.getElementById("system");
memo = document.getElementById("Memo");
// set initial value
initialValue = ordernumber.value;
};
function takeawayfield() {
if (ordernumber.value != initialValue && system.value == "sys1") {
dok = 0;
memo.style.display = "none";
} else {
dok = 1;
memo.style.display = "inline";
}
};
jsFiddle
If you want to react to changes by the user after the page has loaded you could listen to the keyup event of the input box and the dropdown.
Here's an example:
window.onload = function() {
document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
document.getElementById("system").addEventListener('change', takeawayfield, false);
function takeawayfield()
{
if (document.getElementById("system").value == "sys1") {
toggleMemo(false);
}
else {
toggleMemo(true);
}
}
function toggleMemo(show) {
var memo = document.getElementById("Memo");
if (show) {
memo.style.display = "inline";
}
else {
memo.style.display = "none";
}
}
};
http://jsfiddle.net/je5a7/
If your dropdown (select/option) have values in the option tag then the code below should be work fine. (after the user selects)
The select for example:
<select id="system">
<option value="sys1">system 1</option>
</select>
Your code
document.getElementById("system").value == "sys1"
OR you change your code:
if (document.getElementById("ordernumber").changed == true) dok=1;
else dok=0;
if (document.getElementById("system").value == "sys1") dok=1
else dok=0;
I'm making a simple HTML5/CSS3/JS website which involves changing the theme (background) with a dropdown menu. However, my code does nothing.
<div id="theme-picker">
<form action="">
<select name="themakeuze" id="thema" onchange="changeTheme();">
<option value="dark" >Donker thema</option>
<option value="light">Licht thema</option>
</select>
</form>
</div>
<script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("thema");
var strUser = e.options[e.selectedIndex].text;
if (strUser == "Donker thema")
{
document.body.style.backgroundImage = 'url(img/binding_dark.png)';
}
if (strUser == "Licht thema")
{
document.body.style.backgroundImage = 'url(img/binding_light.png)';
}
}
</script>
I'm obviously not very good at JavaScript. We're not allowed any libraries.
(1) The onchange event should be applied to the select itself:
<select name="thema" id="thema" onchange="changeTheme();">
<option value="dark">Donker thema</option>
<option value="light">Licht thema</option>
</select>
(2) The following lines should be placed inside the function changeTheme() rather than outside it:
var e = document.getElementById("thema");
var strUser = e.options[e.selectedIndex].text;
(3) The if statement should be properly written as:
if (strUser == "dark")
change the code and set onchange="changeTheme()" on the Select not in the option
Also prepend "document" where you try to set the background.
document.body.style.backgroundImage = 'url(img/binding_dark.png)';
I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.
this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}