jQuery? Image changes based on selection.

Gravity Support Forums » Plugin Support » Gravity Forms

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 12 years ago on Tuesday November 1, 2011 | Permalink
David Smith
Member

Hi Saulorama,

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

Posted 12 years ago on Tuesday November 1, 2011 | Permalink
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 12 years ago on Tuesday November 1, 2011 | Permalink
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 12 years ago on Tuesday November 1, 2011 | Permalink
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 12 years ago on Tuesday November 1, 2011 | Permalink
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 12 years ago on Tuesday November 1, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
Rob Harrell
Member

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

Posted 12 years ago on Wednesday November 2, 2011 | Permalink
saulorama
Member

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

Posted 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Wednesday November 2, 2011 | Permalink
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 12 years ago on Friday November 18, 2011 | Permalink
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 12 years ago on Friday November 18, 2011 | Permalink

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