https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection Gravity Support Forums Topic: jQuery? Image changes based on selection. en-US Sun, 19 Apr 2026 23:26:11 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-41551 Fri, 18 Nov 2011 15:52:57 +0000 Carl Hancock 41551@https://legacy.forums.gravityhelp.com/ <p>@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:</p> <p><a href="http://www.gravityhelp.com/documentation/page/Gform_page_loaded" rel="nofollow">http://www.gravityhelp.com/documentation/page/Gform_page_loaded</a> </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-41524 Fri, 18 Nov 2011 09:17:13 +0000 friesens 41524@https://legacy.forums.gravityhelp.com/ <p>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? </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39753 Wed, 02 Nov 2011 17:29:39 +0000 saulorama 39753@https://legacy.forums.gravityhelp.com/ <p>Thanks, yeah it could get messy. lol.</p> <p>So,<br /> $('#input_1_1, #field_1_2 input')<br /> would turn into<br /> $('.i_change')</p> <p>Would that work to select all classes of i_class? </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39750 Wed, 02 Nov 2011 17:26:13 +0000 David Smith 39750@https://legacy.forums.gravityhelp.com/ <p>Hi Saul,</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39748 Wed, 02 Nov 2011 17:22:52 +0000 saulorama 39748@https://legacy.forums.gravityhelp.com/ <p>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. </p> <p>You have already made the process easier than I thought it could be. Lets take it one more step? :)</p> <p>Thanks, yall are awesome!!! </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39747 Wed, 02 Nov 2011 17:12:31 +0000 saulorama 39747@https://legacy.forums.gravityhelp.com/ <p>Never mind... :) I fixed it. I forgot that Wordpress automatically adds a paragraph to everything. :) </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39746 Wed, 02 Nov 2011 17:07:54 +0000 Rob Harrell 39746@https://legacy.forums.gravityhelp.com/ <p>Saul, it looks like when you hide the top 2 images, your break tags are still visible, causing the space. </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39745 Wed, 02 Nov 2011 17:00:03 +0000 saulorama 39745@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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?</p> <p><a href="http://digitalsqfthost.net/forms/?page_id=9" rel="nofollow">http://digitalsqfthost.net/forms/?page_id=9</a></p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39733 Wed, 02 Nov 2011 15:28:33 +0000 David Smith 39733@https://legacy.forums.gravityhelp.com/ <p>Hi Saul,</p> <p>Check out the code in this example samples:</p> <p><a href="http://dl.dropbox.com/u/689144/files/jquery-image-changer.htm" rel="nofollow">http://dl.dropbox.com/u/689144/files/jquery-image-changer.htm</a></p> <p>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.</p> <p>Let me know if you have any questions. </p> https://legacy.forums.gravityhelp.com/topic/jquery-image-changes-based-on-selection#post-39651 Wed, 02 Nov 2011 09:17:48 +0000 saulorama 39651@https://legacy.forums.gravityhelp.com/ <p>Since I am new to jQuery I am having a blast trying to learn this.</p> <p>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.</p> <p>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.</p> <p>Thanks in advance!!!</p> <p>-Saul </p>