Page 1 of 1
Conditionally show image
Posted: 18 Jan 2018
by Roo
Can I conditionally show an image based on the field on the Form (drop down or checkbox). There will be a number of images 6+. I would like these images on one row of a table, but I would like to Collapse the left most image if the corresponding image is not present. The images would come from a image library on the same site.
ex: if the third image is chosen and image one and two are not chosen there are no blank spaces where image 1 and 2 would have been.
Thanks
Re: Conditionally show image
Posted: 18 Jan 2018
by Nikita Kurguzov
Dear Roo,
Yes, it is possible, you can have multiple Image controls in the Table container, give them all a CSS class and then use it to hide or show images based on conditions like this:
Code: Select all
$('.img1').hide();
$('.img2').show();
You can also look for changes and retrieve value of the choice field, see how to do it here -
https://spform.com/javascript-framework ... eld-values
Re: Conditionally show image
Posted: 18 Jan 2018
by Roo
Thanks Nikita
I've got all of that and it works fine on the checkbox. It also works on the Text box if I have a "change function' in place.
I cant seem to get it working if there is no change on a textbox
Re: Conditionally show image
Posted: 18 Jan 2018
by Roo
Also, sorry about this!!, What we're looking at now is to have the image conditional on a Multichoice field. The choice select has about 40 or so possibilities. So What I need to do is if 1,2,3 or 4 is choosen then show img1 if 5 6 7 8 then show img 2 if 2 3 7 8 then show img1 and img 2
Re: Conditionally show image
Posted: 18 Jan 2018
by Nikita Kurguzov
I cant seem to get it working if there is no change on a textbox
Dear Roo,
Easiest option would be to place the main code that shows picture inside a function and run this function on change AND when the page opens, so it automatically shows pictures from the beginning:
Code: Select all
function showPictures(){
//Your code here ...
}
//run on change
fd.field('MultiChoice').change(function(){
showPictures();
});
//run at the beginning
showPictures();
Re: Conditionally show image
Posted: 19 Jan 2018
by Roo
Hi
I still dont see how I can conditionally hide or show on opening.
My code on change (of a boolan object) is
fd.field('_x0048_200').change(function(){
if(fd.field('_x0048_200').value()){
$('.img1').show();
}
else{
$('.img1').hide();
}
});
and this works fine.
However I'm unsure on how to set the hide/show based on the above on opening the page.
I've tried the get boolean get statement on the blog but that didn't work.
Re: Conditionally show image
Posted: 19 Jan 2018
by Nikita Kurguzov
Dear Roo,
Try to replace this:
Code: Select all
fd.field('_x0048_200').change(function(){
if(fd.field('_x0048_200').value()){
$('.img1').show();
}
else{
$('.img1').hide();
}
});
With this:
Code: Select all
//all the actual code goes inside the function:
function showHideFields(){
if(fd.field('_x0048_200').value()){
$('.img1').show();
}
else{
$('.img1').hide();
}
}
//call the function on change
fd.field('_x0048_200').change(function(){
showHideFields();
});
//call the function on opening
showHideFields();
Re: Conditionally show image
Posted: 19 Jan 2018
by Roo
That is almost perfect.
The only thing is there is a slight issue: on my form the field '_x0048_200' is updated from other fields and the change function does not register - if you save and return to the form it is fine, but the image does not change when the '_x0048_200' value is automatically changed
Re: Conditionally show image
Posted: 19 Jan 2018
by Nikita Kurguzov
on my form the field '_x0048_200' is updated from other fields
I assume that this is done with JS correct? If it's inside the JS editor, you can simply call the
showHideFields(); function after the change takes place.
Re: Conditionally show image
Posted: 19 Jan 2018
by Roo
Awesome