PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

jQuery? Image changes based on selection.

Gravity Support Forums » Plugin Support » Gravity Forms

  1. saulorama
    Member

    I am building a form that has a drop down list. Based on a persons selection I need an image on the page to change. My understanding is I would need to do this in jQuery but I am not sure how. Any help would be appreciated.

    Thanks!

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  2. David Smith
    Member

    Hi Saulorama,

    Could you post a link to your form and we can advise from there? :)

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  3. saulorama
    Member

    The full form is not built yet but an example of what I want is below.

    http://digitalsqfthost.net/forms/?page_id=9

    The first selection part of the form would be tied to the first image and the second selection part of the form would be part of the second image.

    Thanks!

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  4. David Smith
    Member

    Hi Saulorama,

    Here is a rough start to get you going: http://pastie.org/2795047

    The concept is that you'll add a class to each value which is the "value" of each option. When the option is selected, it hides all the images and then shows the image with a class that matches that option's value. Let me know if you have any questions. :)

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  5. saulorama
    Member

    Sweet! I am new to jQuery but I think I get it. One question that I have before I test this bad boy out... :)

    So, the "#input_1_1" is the form function? Function value? Lets say I set the drop down menu choice "First Image Choice" to value drop_choice_1. Would I use the value "drop_choice_1" to replace "#input_1_1"?

    Thanks!

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  6. saulorama
    Member

    Ok, I have updated and had some progress. Right now the only thing that happens is the images fade out and not come back. I am not sure how to have the javascript change based on selection not just on input form.

    Posted 13 years ago on Tuesday November 1, 2011 | Permalink

  7. saulorama
    Member

    Since I am new to jQuery I am having a blast trying to learn this.

    So far I have setup four images. The first two images should be tied to the first input field and the second two images should be tied to the second input field.

    I would like to have image 2 not be shown and replace image 1 if selection changes to the first image choice in #input_1_1. I just don't see how to select the value field from the form in jQuery. I see stuff about .val() but I am not sure if replacing #input_1_1 with that would work. I can't seem to get it to work that is.

    Thanks in advance!!!

    -Saul

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  8. David Smith
    Member

    Hi Saul,

    Check out the code in this example samples:

    http://dl.dropbox.com/u/689144/files/jquery-image-changer.htm

    You'll see that all the images are in a single "parent" div. This is important since that is how we are targeting the images to hide. The next thing is, since you wanted to show and hide them in groups, I updated the value of the field options to "test_group_1" and "test_group_2" respectively. Then added that same value as a class to the "groups" of images.

    Let me know if you have any questions.

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  9. saulorama
    Member

    Yeah, I was over thinking it and didn't realize setting the "value" in the form was part of the class with the javascript. Thanks!!! I got it working... but I had one last simple question.

    I believe my images have the same setup as yours but what did you do different to have them next to each other instead of jumping around like mine?

    http://digitalsqfthost.net/forms/?page_id=9

    Thanks!

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  10. Rob Harrell
    Member

    Saul, it looks like when you hide the top 2 images, your break tags are still visible, causing the space.

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  11. saulorama
    Member

    Never mind... :) I fixed it. I forgot that Wordpress automatically adds a paragraph to everything. :)

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  12. saulorama
    Member

    Can I have the javascript target any input field with a css class name of i_change instead of #input_1_1 or #field_1_2? The reason I ask is this is a great script and it would be nice to call it when I need it instead of insert the field every time. I am about to build a site with 14 forms and each form has 2-4 image selections.

    You have already made the process easier than I thought it could be. Lets take it one more step? :)

    Thanks, yall are awesome!!!

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  13. David Smith
    Member

    Hi Saul,

    Sure you can update the script to target any field you want. The trick is making sure that the images which are displayed have the corresponding value/class to the script knows which images to target.

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  14. saulorama
    Member

    Thanks, yeah it could get messy. lol.

    So,
    $('#input_1_1, #field_1_2 input')
    would turn into
    $('.i_change')

    Would that work to select all classes of i_class?

    Posted 13 years ago on Wednesday November 2, 2011 | Permalink

  15. friesens
    Member

    I am also testing this on one of my forms. It works as long as the the form is on the first page. As soon as I click next - it stops working. My form needs the images on page 2 of the form. The form is not publicly available - what could be the issue here?

    Posted 13 years ago on Friday November 18, 2011 | Permalink

  16. Carl Hancock
    Administrator

    @friesens Multi-Page forms are more complex. You would have to trigger your code each time a new page in the multi-page form is loaded. You do this using jQuery. This is the hook you would use:

    http://www.gravityhelp.com/documentation/page/Gform_page_loaded

    Posted 13 years ago on Friday November 18, 2011 | Permalink

This topic has been resolved and has been closed to new replies.