- elaserbayAsked on January 26, 2012 at 11:01 AM
Any way to change a picture on the form based on the selection of a drop down
- fxrAnswered on January 26, 2012 at 12:00 PM
No, this unfortunately is not possible with JotForms current features
NOTE: Any edits then made to your form on JotForm would mean you would have to reupload the source code back to your webserver.
Given these drawbacks, please advise, if you do want to pursue the functionality and we will do our very best to guide you through the process.
- elaserbayAnswered on January 26, 2012 at 07:11 PMThanks for the fast response,
If you have some nice robust code I am willing to try it.
- fxrAnswered on January 26, 2012 at 07:31 PM
We will have a go at this.
Peter first of you need to create the form on JotForm.
It really must be as complete as possible to make this process as smooth as possible.
Create the dropdown menu and add to the form the image that you want to change depending on which item in the dropdown menu is selected.
Do you know how to add an image to a form?
Once the form is created, link me to it and explain which dropdown menu (if there is more than one) you want this effect to occur on.
- elaserbayAnswered on January 27, 2012 at 06:44 AM
I hope you can do this in a very elegant way.
To help I uploaded all the pictures, they have the same name as the item in the list (JPG extension)
The idea is simples:
> select item from list
> the item name is used as picture name (with hardcoded JPG extension or selection of extension)
> if picture exist (previously uploaded) then it replaces the generic one.
Please let me know
Please consider something like this as "build in feature"
- fxrAnswered on January 27, 2012 at 07:48 AM
A working example is here
It just means uploading any forms source code to your webserver.
(Just do this by creating a new html file on your webserver; open the form on its JotForm URL, view its source & copy and paste that into a your new file on your webserver)
Once that is done add the following the script to the bottom of the page, just before the closing </body> tag -> http://pastie.org/3262916
Then you just need to make a 3 edits to the new HTML file now on your web server.
These are shown here in this graphic.
3. Find the line of code where the image you want to update, then add an id tag to it.
This code should work for any user on any form, just as long as the images you want to use are uploaded onto JotForm and have the same name as the items on the dropdown menu. The .jpg extension is hardcoded but could be easily changed.
Hope that helps, let me know if you have any questions on any of that.
- elaserbayAnswered on January 27, 2012 at 08:38 AMThanks
- elaserbayAnswered on January 28, 2012 at 08:00 PMThanks for your effort,
I think I got it.
My (hopefully) last question / request
>> Can I based on the selected item also display the corresponding
"price" << ???
I want to implement a form that is based on drop-down list for several
categories of product.
- JotForm SupportabajanAnswered on January 28, 2012 at 11:02 PM
Perhaps I'm misunderstanding your requirement but is this the sort of thing you want your form to do? If so, you simply need to insert all of the images and setup conditions to show them according to what is selected in the drop down.
- JotForm SupportabajanAnswered on January 28, 2012 at 11:05 PM
It's basically the same procedure to display the corresponding price.
- elaserbayAnswered on January 29, 2012 at 02:15 AMThanks for the response and sample form
It seems extremely tedious to do it with the conditions
based on the dropdown selection.
I imagine this
I have a list with the names of "my products"
When an item in this list is selected 3 to 4 other generic fields are
loaded with the corresponding content
The fields are
> picture ( see working demo here
> (another one not defined yet)
Thanks for your time
- elaserbayAnswered on January 29, 2012 at 03:08 AMHello *fxr ,
Can you please change the event listener so that it reponds to cursor keys ?
Currently it works if an item is selected by mouse click, however if
cursor keys are used to select an item the picture is not updated and
things go out of sync.
- alexsanrisAnswered on January 29, 2012 at 04:54 AM
Спасибо за интересный и полезный сайт
- JotForm SupportabajanAnswered on January 29, 2012 at 05:50 AM
It actually shouldn't be that tedious to do it with conditions. It would just be a matter of adding extra rules to each condition. In other words, when a product is selected, its picture, description, price and the other element yet to be defined would be displayed. In my sample form that would be a total of three (3) conditions, each containing four (4) rules. In your form it would be nine (9) conditions with four (4) rules.
Later today I'll update my demo later to illustrate what I mean.
Due to certain drawbacks, we usually recommend embedding the form's full source into a page only if there's no way to achieve the desired functionality via the form builder. For instance, imagine having that form's full source embedded into hundreds of pages and you wanted to change some aspect of it. You would have to manually go into each of those pages and change that element. Unless you had a tool like Free Text Blocks Replacer at your disposal, that would be tedious!
P.S. In your last post, I think you wanted to post a link to a working demo but there was no link. Please try to post it again, as we would like to see the demo.
- elaserbayAnswered on January 29, 2012 at 10:21 AMThanks abajan,
I just did a condition based form
with 9 or so items and just
show / hide a freeHtml element (price constant, no image change)
It seems very very slow, way to many clicks and time involved.
Below the first response to my question, it includes the link I forgot
Answered by *fxr *
An working example is here
It just means uploading any forms source code to your webserver.
(Just do this by creating a new html file on your webserver; open the
form on its JotForm URL, view its source & copy and paste that into a
your new file on your webserver)
- elaserbayAnswered on January 29, 2012 at 10:34 AMabajan,
something else I need to solve.
if the dropdown has the focus and items are selected by using cursor
keys the logic fails.
It seems that the "change" event needs a mouse click and is nor aware of
changes produced by keys
(this is a really bad)
- JotForm SupportabajanAnswered on January 29, 2012 at 11:41 AM
As to my own solution, if you provide the prices and description for each product, I can construct the form for you in the form builder but for the time being, here's a clone of the form based on the solution implemented in the earlier demo.
- JotForm SupportabajanAnswered on January 29, 2012 at 12:16 PM
After doing a bit of "googling", I came upon this thread with a user wanting the same behavior with regards to the cursor keys. I think BrandonH (the last responder in the thread) makes a valid point as to why you wouldn't necessarily want that to happen.
- elaserbayAnswered on January 29, 2012 at 04:38 PMI understand, Thanks for the feedback.
In my case I can not allow the picture to differ from what the list
shows, I'll think about something