What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Picture and dropdown

    Asked by elaserbay on January 26, 2012 at 11:01 AM

    Hell there,

    Any way to change a picture on the form based on the selection of a drop down 

    Best regards

    peter

  • Profile Image

    Answered by fxr on January 26, 2012 at 12:00 PM

    Hello Peter,

    No, this unfortunately is not possible with JotForms current features

    If this functionality is extremely important to you, we could probably provide some javascript to do it, but this would mean downloading your forms entire source code and uploading it to your webserver. 

    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. 

     

  • Profile Image

    Answered by elaserbay on January 26, 2012 at 07:11 PM
    Thanks for the fast response,
    If you have some nice robust code I am willing to try it.
  • Profile Image

    Answered by fxr on January 26, 2012 at 07:31 PM

    OK,

    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. 

    I will then have a go at the javascript and link you to a working example ready for you to upload to your webserver. 

  • Profile Image

    Answered by elaserbay on January 27, 2012 at 06:44 AM

    the link:

    http://form.jotform.com/form/20260642085

    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"

     

    best regards

    peter

  • Profile Image

    Answered by fxr on January 27, 2012 at 07:48 AM

    The javascript for this is trivial. 

    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.

    1. Find the ID of your dropdown menu, then update a javascript variable with it.

    2. Entering your JotForm username as another javascript variable.

    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. 

  • Profile Image

    Answered by elaserbay on January 27, 2012 at 08:38 AM
    Thanks
    peter
  • Profile Image

    Answered by elaserbay on January 28, 2012 at 08:00 PM
    Thanks 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.
  • Profile Image
    JotForm Support

    Answered by abajan on January 28, 2012 at 11:02 PM

    @Peter

    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.

  • Profile Image
    JotForm Support

    Answered by abajan on January 28, 2012 at 11:05 PM

    It's basically the same procedure to display the corresponding price.

  • Profile Image

    Answered by elaserbay on January 29, 2012 at 02:15 AM
    Thanks for the response and sample form
    It seems extremely tedious to do it with the conditions
    The idea is to use JavaScript to replace the content of a few fields
    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
    )
    > description
    > price
    > (another one not defined yet)
    Thanks for your time
    Peter
  • Profile Image

    Answered by elaserbay on January 29, 2012 at 03:08 AM
    Hello *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.
    Thanks again
    peter
  • Profile Image

    Answered by alexsanris on January 29, 2012 at 04:54 AM

    Спасибо за интересный и полезный сайт

  • Profile Image
    JotForm Support

    Answered by abajan on January 29, 2012 at 05:50 AM

    @Peter

    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.

  • Profile Image

    Answered by elaserbay on January 29, 2012 at 10:21 AM
    Thanks 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
    best regards
    peter
    Answered by *fxr *
    The javascript for this is trivial.
    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)
  • Profile Image

    Answered by elaserbay on January 29, 2012 at 10:34 AM
    abajan,
    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)
    I think using javaScript it can be fixed more easily ?
    peter
  • Profile Image
    JotForm Support

    Answered by abajan on January 29, 2012 at 11:41 AM

    Well, while it's true that the image doesn't change as selections are changed with the cursor keys, if the Return key [Enter] is hit after a selection is made, the image does change. However, you may be correct that there's a JavaScript solution to getting the images updated with just the cursor keys and fxr may well be able to put together a fix to do that for you. He's actually quite good at that sort of stuff!

    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.

  • Profile Image
    JotForm Support

    Answered by abajan 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.

  • Profile Image

    Answered by elaserbay on January 29, 2012 at 04:38 PM
    I 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
    best regards
    peter