29 Replies Latest reply: Feb 24, 2014 7:46 AM by tutorialspark RSS

    Change image when form dropdown list value is selected

    soulfunkifiedjazz Community Member

      I really thought this would be simpler but I just can't get it working.

       

      I have a submit from from paypal with a dropdown list. The list allows you to select color. I want to change an image on the page to display the appropriate color when the color is selected from the drop down list. So a black image shows up when black is selected, a red when red - etc...

       

      I would be very grateful if someone can share some succinct, browser compatible code. Thank you so much for any help you can provide.

       

      Bill

        • 1. Re: Change image when form dropdown list value is selected
          soulfunkifiedjazz Community Member

          another possible solution: I basically want both the selected value and the image to change from one single event. So if I publish a small color swatch image, I can use swap image to change the product picture when the swatch is picked. I thought I could use change properties to also update the value listed in the dropdown list at the same time. I want the product image to match the selected value in the list, so if an event outside of the form, like selecting a color swatch could control both things I would be happy with that. I know the swap image part, but can not figure out how to change the selected value in the dropdown.

          • 2. Re: Change image when form dropdown list value is selected
            E. Michael Brandt Community Member

            You are correct that this is not quite as simple as you might think at first.  You asked for succinct, but there are several steps involved, in Code View (horrors!)

             

            1) First add this script just before the closing head tag ( </head> ) on your page and then insert all your path/imagenames where you see mine.  Notice the ORDER of the IMAGES must correspond to the order you want them to be called by the Select dropdown in your form!:

             

            <script type="text/javascript">
            <!--
            function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com
               
                var imgs=["images/pic01.jpg","images/pic02.jpg","images/pic03.jpg"];
               
                var d=document;
                theValue=imgs[theValue];
                if (!theValue || !d.getElementById ) return;
                var obj = d.getElementById(objId);
                if (obj) obj.src=theValue;   
            }
            </script>

             

             

            2) Second, in your form, add the onchange event shown below to the <select> tag.  Note that in this example the ID on the <img> tag we'll be working with is "theImg" ,  Change that as needed.  If youdo not already have an ID on the <img> tag (see farther below), simply use "theImg"

             

            So here is a form with a select field.  Use whatever values you need for this, simply add my onchange event as shown:


            <form name="form1" method="post" action="">
              <select name="productColors" id="productColors" onchange="diva_imgBySel('theImg',this.selectedIndex)">
                <option value="x">xx</option>
                <option value="y">yy</option>
                <option value="z">zz</option>
              </select>
              <img src="pic99.jpg" alt="anAlt" name="theImg" width="200" height="200" id="theImg">
            </form>

             

            3) Finally you may want to click on the <body> tag, then go to the Tag/Behaviors window, click its + plus sign, and choose "Preload Images" and add all the imagenames so they will appear more quickly when the select list is used.

             

            Hope that all makes sense.

             

            -- 

            E. Michael Brandt

            www.divahtml.com
            www.divahtml.com/products/scripts_dreamweaver_extensions.php
            Standards-compliant scripts and Dreamweaver Extensions

            www.valleywebdesigns.com/vwd_Vdw.asp
            JustSo PictureWindow
            JustSo PhotoAlbum, et alia

            --
            • 3. Re: Change image when form dropdown list value is selected
              soulfunkifiedjazz Community Member

              That works great. Thanks so much. I totally over complicated the code and embarrased by how straight forward you made this work. I really appreciate your timely input and succinct solution. Be well.

               

              Bill C

              • 4. Re: Change image when form dropdown list value is selected
                E. Michael Brandt Community Member

                Always happy to help.

                 

                I just realized that the code could be improved just a bit by moving the array outside the function thusly.  In doing so, since we are exposing the variable to the global namespace, I thought it best to rename it a tad, so you'll need to update the variable's name in the function as well (from "imgs" to "sel_imgs" .  Thus:

                 

                <script type="text/javascript">
                <!--

                var sel_imgs=["images/pic01.jpg","images/pic02.jpg","images/pic03.jpg"]; /* this array is now a global */

                 

                function diva_imgBySel(objId,theValue) { //v0.1 divaHTML.com 
                    var d=document;
                    theValue=sel_imgs[theValue];
                    if (!theValue || !d.getElementById ) return;
                    var obj = d.getElementById(objId);
                    if (obj) obj.src=theValue;   
                }
                </script>

                 

                The reason this is better is that the array need be declared and populated only once.  As I had it before, it was being recreated each time the function was called.  Just a waste of cycles, but no other harm done.

                 

                -- 

                E. Michael Brandt

                www.divahtml.com
                www.divahtml.com/products/scripts_dreamweaver_extensions.php
                Standards-compliant scripts and Dreamweaver Extensions

                www.valleywebdesigns.com/vwd_Vdw.asp
                JustSo PictureWindow
                JustSo PhotoAlbum, et alia

                --
                • 5. Re: Change image when form dropdown list value is selected
                  soulfunkifiedjazz Community Member

                  Thanks, I appreciate the upgrade.

                   

                  Be well.

                  • 6. Re: Change image when form dropdown list value is selected
                    babyewok Community Member

                    Thanks for sharing this really useful bit of code.  I just wonder whether you could help me to expand it further.  I would like to use a light box for viewing the "theImg" image larger. Essentially, I just need to wrap it in an anchor tag, but the href will need to be updated at the same time as the source.  How can I do this?  As an example, the image would now look like this:

                     

                    <a href="images/large/pink.gif" rel="prettyPhoto"><img src="images/pink.gif" alt="anAlt" name="theImg" width="99" height="100" id="theImg"></a>

                     

                    Any ideas?

                    • 7. Re: Change image when form dropdown list value is selected
                      timlogochair Community Member

                      Is it possible to duplicate this script for three images on the same page?  What all would need to change in the script?

                      • 8. Re: Change image when form dropdown list value is selected
                        Nancy O. MVP

                        Hi and welcome to the Adobe DW Forum.

                        This is a very old discussion from 2009.   For better replies, please start a new discussion in the web forum explaining exactly what you're trying to do and show us a link to your page. 

                         

                         

                        Thanks,

                        Nancy O.

                        • 9. Re: Change image when form dropdown list value is selected
                          timlogochair Community Member

                          Unfortunately, this isn't so much of a DW question (though I do use CS5).  I am simply using the script that E. Michael Brandt offered up in this thread exactly as he offered it.  I simply want to modify this function as necessary so I can use it (duplicate it) for use three times on the same page.

                           

                          I'd like to have an "image box" to correspond with drop down list for a "product line".  I'd like to have another "image box" that corresponds with another drop down list for "fabric color" (and loads that image in a separate IMG id.  And finally a third "image box" that corresponds with an "accent color" drop down list (that loads the appropriate image in a separate IMG id). 

                           

                          I've got the "Product Line" list and IMG tag all set up and working, just as described in the original post.

                           

                          The trouble is, I simply don't know what all needs to change in the function itself so that the three scripts (and lists/images) do not conflict with each other.

                           

                          This is the part I do not understand what to change for each version (fabric and accent colors) of the function:

                          theValue=imgs[theValue];
                          if (!theValue || !d.getElementById ) return;
                          var obj = d.getElementById(objId);
                          if (obj) obj.src=theValue; 
                          • 10. Re: Change image when form dropdown list value is selected
                            E. Michael Brandt Community Member

                            There are lots of ways to skin this cat, but here's one:

                             

                            in the head:

                             

                            in the body:

                              anAlt

                             

                              anAlt

                            </form>

                             

                            A demo of this code: http://valleywebdesigns.com/test.html

                             

                            Hope that helps.

                             

                            e michael brandt

                            • 11. Re: Change image when form dropdown list value is selected
                              E. Michael Brandt Community Member

                              oh well, guess the code is not being displayed, so just go to the demo page

                              and check the source code.

                               

                              e michael

                              • 12. Re: Change image when form dropdown list value is selected
                                timlogochair Community Member

                                Thanks so much.  I used your info from above and am in the process of creating a product configurator for our products.  Do you see any problems/issues etc or ways to make this script better?  I don't have most of the images there yet, but if you choose big boy chair and then choose navy/powder/black fabric and most accent colors you should see it working (in FireFox anyway).  Not sure why it isn't working in IE.  Any ideas?

                                 

                                Here's the link:

                                http://logochairs.com/j25cms/index.php/customform/test-form

                                 

                                 

                                And here's my code:

                                 

                                <script type="text/javascript">

                                <!--

                                function logo_prodImgBySel(objId,theValue) {

                                  

                                var cobaseimages=["/j25cms/images/customimages/blank.jpg","/j25cms/images/customimages/11/base.jpg", "/j25cms/images/customimages/12/base.jpg", "/j25cms/images/customimages/13/base.jpg", "/j25cms/images/customimages/15/base.jpg", "/j25cms/images/customimages/20/base.jpg", "/j25cms/images/customimages/23/base.jpg", "/j25cms/images/customimages/24/base.jpg", "/j25cms/images/customimages/25/base.jpg", "/j25cms/images/customimages/27/base.jpg", "/j25cms/images/customimages/32/base.jpg", "/j25cms/images/customimages/35/base.jpg", "/j25cms/images/customimages/39/base.jpg", "/j25cms/images/customimages/41/base.jpg", "/j25cms/images/customimages/42/base.jpg", "/j25cms/images/customimages/48/base.jpg", "/j25cms/images/customimages/50/base.jpg", "/j25cms/images/customimages/51/base.jpg", "/j25cms/images/customimages/52/base.jpg", "/j25cms/images/customimages/54/base.jpg", "/j25cms/images/customimages/56/base.jpg", "/j25cms/images/customimages/57/base.jpg", "/j25cms/images/customimages/58/base.jpg", "/j25cms/images/customimages/60/base.jpg", "/j25cms/images/customimages/62/base.jpg", "/j25cms/images/customimages/64/base.jpg", "/j25cms/images/customimages/65/base.jpg", "/j25cms/images/customimages/68/base.jpg", "/j25cms/images/customimages/69/base.jpg", "/j25cms/images/customimages/71/base.jpg", "/j25cms/images/customimages/72/base.jpg", "/j25cms/images/customimages/74/base.jpg", "/j25cms/images/customimages/77/base.jpg", "/j25cms/images/customimages/78/base.jpg", "/j25cms/images/customimages/79/base.jpg", "/j25cms/images/customimages/80/base.jpg", "/j25cms/images/customimages/82/base.jpg", "/j25cms/images/customimages/83/base.jpg", "/j25cms/images/customimages/84/base.jpg", "/j25cms/images/customimages/90/base.jpg", "/j25cms/images/customimages/94/base.jpg"];

                                 

                                    var d=document;

                                    theValue=cobaseimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                <!--

                                 

                                  

                                function logo_prodImgPrim(objId,theValue) {

                                  var coimageprimary1='/j25cms/images/customimages/';

                                var coimageprimary25= document.getElementById('ff_elem368');

                                var coimageprimary2= coimageprimary25.options[coimageprimary25.selectedIndex].value

                                var coimageprimary3='/primary/';

                                var ttt='Powder.png';

                                var mypath=(coimageprimary1 + coimageprimary2 + coimageprimary3);

                                 

                                  var coPrimaryimages=['/j25cms/images/customimages/blank.png',(mypath + 'White.png'),

                                (mypath + 'Black.png'),

                                (mypath + 'Lemon.png'),

                                (mypath + 'Yellow.png'),

                                (mypath + 'Gold.png'),

                                (mypath + 'Tangerine.png'),

                                (mypath + 'Rust.png'),

                                (mypath + 'Orange.png'),

                                (mypath + 'Carrot.png'),

                                (mypath + 'Red.png'),

                                (mypath + 'Cardinal.png'),

                                (mypath + 'Garnet.png'),

                                (mypath + 'Maroon.png'),

                                (mypath + 'Purple.png'),

                                (mypath + 'Powder.png'),

                                (mypath + 'Navy.png'),

                                (mypath + 'Royal.png'),

                                (mypath + 'Hunter.png'),

                                (mypath + 'Gray.png'),

                                (mypath + 'Charcoal.png'),

                                (mypath + 'Khaki.png'),

                                (mypath + 'Vegas.png'),

                                (mypath + 'Kelly.png'),

                                (mypath + 'Pink.png'),

                                ];   

                                    var d=document;

                                    theValue=coPrimaryimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                  <!--

                                 

                                  

                                function logo_prodImgSec(objId,theValue) {

                                  var coimagesecondary1='/j25cms/images/customimages/';

                                var coimagesecondary25= document.getElementById('ff_elem368');

                                var coimagesecondary2= coimagesecondary25.options[coimagesecondary25.selectedIndex].value

                                var coimagesecondary3='/accent/';

                                var ttt='Powder.png';

                                var mypathz=(coimagesecondary1 + coimagesecondary2 + coimagesecondary3);

                                 

                                  var coSecondaryimages=['/j25cms/images/customimages/blank.png',(mypathz + 'White.png'),

                                (mypathz + 'Black.png'),

                                (mypathz + 'Lemon.png'),

                                (mypathz + 'Yellow.png'),

                                (mypathz + 'Gold.png'),

                                (mypathz + 'Tangerine.png'),

                                (mypathz + 'Rust.png'),

                                (mypathz + 'Orange.png'),

                                (mypathz + 'Carrot.png'),

                                (mypathz + 'Red.png'),

                                (mypathz + 'Cardinal.png'),

                                (mypathz + 'Garnet.png'),

                                (mypathz + 'Maroon.png'),

                                (mypathz + 'Purple.png'),

                                (mypathz + 'Powder.png'),

                                (mypathz + 'Navy.png'),

                                (mypathz + 'Royal.png'),

                                (mypathz + 'Hunter.png'),

                                (mypathz + 'Gray.png'),

                                (mypathz + 'Charcoal.png'),

                                (mypathz + 'Khaki.png'),

                                (mypathz + 'Vegas.png'),

                                (mypathz + 'Kelly.png'),

                                (mypathz + 'Pink.png'),

                                ];   

                                    var d=document;

                                    theValue=coSecondaryimages[theValue];

                                    if (!theValue || !d.getElementById ) return;

                                    var obj = d.getElementById(objId);

                                    if (obj) obj.src=theValue;  

                                }

                                 

                                function clear_OnChange()

                                {

                                var combo = document.getElementById('ff_elemPriColor');

                                combo.selectedIndex = "0";

                                 

                                var combo2 = document.getElementById('ff_elemSecColor');

                                combo2.selectedIndex = "0";

                                 

                                 

                                </script>

                                <div id="product1image_a" style="position: relative; float: right; top: -20px; right: 0px; width: 250px; height: 250px; border: 2px solid darkgray; box-shadow: 5px 5px 5px rgb(136, 136, 136);">

                                  <img width="250" height="250" style="position:absolute;bottom:0px;right:0px;" id="theImg" src="images/customimages/blank.jpg" alt="" />

                                  <img id="thePrimary" style="position:absolute; bottom:0px; right:0px; width:250px;" src="images/customimages/blank.png">

                                  <img id="theAccent" style="position:absolute; top:0px; left:0px; width:250px;" src="images/customimages/blank.png">

                                </div>

                                 

                                ----------------------------------------

                                <span id="bfElemWrap368" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabel368" for="ff_elem358">Product Line</label>

                                <select id="ff_elem368" name="ff_nm_prod1[]" onchange="logo_prodImgBySel('theImg',this.selectedIndex);clear_OnChange();logo_prodImgPrim('thePrim ary',this.selectedIndex);logo_prodImgSec('theAccent',this.selectedIndex);" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="11">Big Boy Chair</option>

                                <option value="12">Deluxe Chair</option>

                                <option value="13">Canvas Chair</option>

                                <option value="15">Sphere Chair</option>

                                <option value="20">Toddler Chair</option>

                                <option value="23">Classic Fleece</option>

                                <option value="24">Sherpa Throw</option>

                                <option value="25">Fleece Throw</option>

                                <option value="27">UltraSoft Blanket</option>

                                <option value="32">Tailgate Table</option>

                                <option value="35">Trashcan Cooler</option>

                                <option value="39">Economy Tent</option>

                                <option value="41">Color Tent</option>

                                <option value="42">Checkerboard Tent</option>

                                <option value="48">Side Panel</option>

                                <option value="50">12 Pack Cooler</option>

                                <option value="51">Luggage Set</option>

                                <option value="52">Rolling Duffel</option>

                                <option value="54">Sport Duffel</option>

                                <option value="56">Lunch Pail</option>

                                <option value="57">Rolling Cooler</option>

                                <option value="58">Party Bucket</option>

                                <option value="60">Picnic Cooler</option>

                                <option value="62">Backpack</option>

                                <option value="64">String Pack</option>

                                <option value="65">Reversible Tote</option>

                                <option value="68">Seat Blanket Combo</option>

                                <option value="69">Stadium Seat with Arms</option>

                                <option value="71">Stadium Cushion</option>

                                <option value="72">Gym Bag</option>

                                <option value="74">Sweatshirt Blanket</option>

                                <option value="77">Round Coozie</option>

                                <option value="78">Flat Coozie</option>

                                <option value="79">Bottle Coozie</option>

                                <option value="80">Stadium Seat</option>

                                <option value="82">8-Can Cooler Tote</option>

                                <option value="83">16-Can Cooler Tote</option>

                                <option value="84">30-Can Cooler Tote</option>

                                <option value="90">Camping Stool</option>

                                <option value="94">Hardback Seat</option>

                                  </span>

                                </select>

                                ---------------------------------------------------------------

                                <span id="bfElemWrapPriColor" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabelPriColor" for="ff_elemPriColor">Primary Fabric</label>

                                <select id="ff_elemPriColor" name="ff_nm_prodcolor[]" onchange="logo_prodImgPrim('thePrimary',this.selectedIndex)" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="White">White</option>

                                <option value="Black">Black</option>

                                <option value="Lemon">Lemon</option>

                                <option value="Yellow">Yellow</option>

                                <option value="Gold">Gold</option>

                                <option value="Tangerine">Tangerine</option>

                                <option value="Rust">Rust</option>

                                <option value="Orange">Orange</option>

                                <option value="Carrot">Carrot</option>

                                <option value="Red">Red</option>

                                <option value="Cardinal">Cardinal</option>

                                <option value="Garnet">Garnet</option>

                                <option value="Maroon">Maroon</option>

                                <option value="Purple">Purple</option>

                                <option value="Powder">Powder</option>

                                <option value="Navy">Navy</option>

                                <option value="Royal">Royal</option>

                                <option value="Hunter">Hunter</option>

                                <option value="Gray">Gray</option>

                                <option value="Charcoal">Charcoal</option>

                                <option value="Khaki">Khaki</option>

                                <option value="Vegas">Vegas</option>

                                <option value="Kelly">Kelly</option>

                                <option value="Pink">Pink</option>

                                 

                                  </span>

                                </select>

                                -----------------------------------------------------------

                                <span id="bfElemWrapSecColor" class="bfElemWrap bfLabelLeft">

                                <label id="bfLabelSecColor" for="ff_elemSecColor">Accent Color</label>

                                <select id="ff_elemSecColor" name="ff_nm_seccolor[]" onchange="logo_prodImgSec('theAccent',this.selectedIndex)" class="ff_elem">

                                <option value="" selected="selected"></option>

                                <option value="White">White</option>

                                <option value="Black">Black</option>

                                <option value="Lemon">Lemon</option>

                                <option value="Yellow">Yellow</option>

                                <option value="Gold">Gold</option>

                                <option value="Tangerine">Tangerine</option>

                                <option value="Rust">Rust</option>

                                <option value="Orange">Orange</option>

                                <option value="Carrot">Carrot</option>

                                <option value="Red">Red</option>

                                <option value="Cardinal">Cardinal</option>

                                <option value="Garnet">Garnet</option>

                                <option value="Maroon">Maroon</option>

                                <option value="Purple">Purple</option>

                                <option value="Powder">Powder</option>

                                <option value="Navy">Navy</option>

                                <option value="Royal">Royal</option>

                                <option value="Hunter">Hunter</option>

                                <option value="Gray">Gray</option>

                                <option value="Charcoal">Charcoal</option>

                                <option value="Khaki">Khaki</option>

                                <option value="Vegas">Vegas</option>

                                <option value="Kelly">Kelly</option>

                                <option value="Pink">Pink</option>

                                 

                                  </span>

                                </select>


                                • 13. Re: Change image when form dropdown list value is selected
                                  E. Michael Brandt Community Member

                                  I see now that you wanted all these selections to affect a single image.

                                  The new script I gave you would only need the imageID changed to the same

                                  ID for it to work as you wish.  Not quite sure why you used the code you

                                  did instead of my new code, unless of course you wrote it before I got back

                                  to you!

                                   

                                  I am on a mac and have no easy way to test on IE.  Don't know why it would

                                  not work as you wrote it, but I confess I did not read all your code in

                                  great detail.  Sorry, just no time.  Perhaps someone else might weigh in,

                                  and debug in IE?  I might have time to take another look later today.

                                   

                                  e michael

                                  • 14. Re: Change image when form dropdown list value is selected
                                    Nancy O. MVP

                                    When things don't work in X-browsers, 98% of the time it's due to code validation errors. I'm guessing that IE is choking on invalid comments and orphaned tags in your HTML code.  See below for details.

                                    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flogochairs.com%2Fj25cms%2Findex.p hp%2Fcustomform%2Ftest-form

                                     

                                    When you resolve the code issues, save and upload test-form to your server.

                                     

                                     

                                    Nancy O.

                                    • 15. Re: Change image when form dropdown list value is selected
                                      timlogochair Community Member

                                      Thank you for that tool.  That was the problem and it is working great now.

                                       

                                      E Michael - thank you so much for your help.  Yes, I had already created this when I got your response, but I will go through your code and see if there's anything I need to do to make mine better/more efficient.  It "looks" like the changes that my drop downs are all affecting the same image, but it's actually 3 <img> tags, loaded into the same < div> and stacked on top of one another to create a composite image.  I think it's going to work out. 

                                       

                                      Now I just need to learn how to take a screenshot of a div...which I have heard you can more or less do using HTML5 canvas element.  Anyone know if it would be possible to make my composite image into a single image a user can download?

                                      • 16. Re: Change image when form dropdown list value is selected
                                        E. Michael Brandt Community Member

                                        >it's actually 3 tags

                                         

                                        well now you've got absolute proof that I did not read your code carefully!

                                         

                                        to make mine better/more efficient

                                         

                                        As you can see, mine uses but a single function and a lot less code on the

                                        page.  but you may not want to mess with success: yours is already working.

                                         

                                        >make my composite image into a single image

                                         

                                        http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

                                         

                                        I've been reading just now about how to use javascript to create a

                                        screengrab.  It is a major undertaking with lots of google hits.  You'd be

                                        wise to create a new thread for this topic.

                                         

                                         

                                        e michael

                                        • 17. Re: Change image when form dropdown list value is selected
                                          timlogochair Community Member

                                          Thanks for the great help.  I'll go ahead an open this up as a new thread.  Is it ok for me to open it in the Dreamweaver forum, even though it isn't really "Dreamweaver" as much as just "web" in general?

                                          • 18. Re: Change image when form dropdown list value is selected
                                            E. Michael Brandt Community Member

                                            I've not been on in forum for years now, so I've no idea. (If you are

                                            discouraged from asking nonDW questions here, there are lots of other good

                                            venues for them,  www.stackoverflow.com being but one.  Pose your question

                                            there carefully but succinctly and you'll get good replies.)

                                             

                                            e michael

                                            • 19. Re: Change image when form dropdown list value is selected
                                              timlogochair Community Member

                                              E. Michael -

                                              In the form/link I posted above, I am having a small snag I'm hoping you can help me with.  I am having trouble creating a simple function that will clear the selections of "Fabric Color" and "Accent Color" dropdowns onchange event of the first drop down for product line. 

                                               

                                              Basically set the value of 'ff_elemPriColor' and 'ff_elemSecColor' to the default base/empty value every time the product line changes.

                                               

                                              Right now, the primary and secondary colors are not being cleared when I change the product line.  Can you help me with a function to clear these two select lists?

                                               

                                              Here's the link again:

                                              http://logochairs.com/j25cms/index.php/customform/test-form

                                               

                                              Currently the function I am calling is this:

                                              function clear_OnChange()

                                              {

                                              document.getElementById('ff_elemPriColor').selectedIndex = 0;

                                              document.getElementById('ff_elemSecColor').selectedIndex = 0

                                               

                                              And this is in my onchange event for the select list of 'ff_elem368' for product line:

                                              clear_OnChange();

                                               

                                              Product line dropdown info:

                                              id=ff_elem368

                                               

                                              Fabric color dropdown info:

                                              id=ff_elemPriColor

                                               

                                              Accent color dropdown info:

                                              id=ff_elemSecColor

                                              • 20. Re: Change image when form dropdown list value is selected
                                                E. Michael Brandt Community Member

                                                Wow that's a complex web of javascript on that page.

                                                 

                                                The problem I think is that you are resetting the select lists to option 0

                                                but since it appears you do not have event listeners on them, you must also

                                                reset the img src(s) back to default manually as well.

                                                 

                                                Also, according to Firefox, there is a javascript error thrown on page load

                                                at line 1357:

                                                 

                                                function call_function(){var this='theImg';var

                                                change=this.selectedIndex;logo_prodImgBySel('theImg',this.selectedIndex);}

                                                 

                                                "missing variable name", apparently referring to the "this"

                                                 

                                                 

                                                e michael

                                                • 21. Re: Change image when form dropdown list value is selected
                                                  timlogochair Community Member

                                                  Sorry about.  That code wasn't supposed to be on there (was supposed to be unpublished code).  I am curious how you saw an error because the markup validator showed 100% and no errors.  I do think I fixed that though.

                                                   

                                                  But I'm still not sure what I need to do to clear the two select boxes.  What should I change/add/remove to get the other dropdowns to reset when there is a change in the first dropdown?

                                                  • 22. Re: Change image when form dropdown list value is selected
                                                    E. Michael Brandt Community Member

                                                    First off just let me point out that you are using jQuery on this page, so

                                                    you could have done this coding a whole lot quicker and easier!

                                                     

                                                    Second, what does "(was supposed to be unpublished code)" mean exactly?

                                                    Are you thinking you can write code on a webpage and have it somehow

                                                    hidden from a user?  Not possible.

                                                     

                                                    Okay, so using your current code -  and I've not tested this but hope it

                                                    works - add these four lines to the end of your function:

                                                     

                                                     

                                                    function logo_prodImgBySel(objId,theValue)

                                                    .

                                                    .

                                                    .

                                                    .

                                                     

                                                     

                                                    • if (theValue == 0){*

                                                    *

                                                    d.getElementById('thePrimary').src='/j25cms/images/customimages/blank.png';*

                                                    *

                                                    d.getElementById('theAccent').src='/j25cms/images/customimages/blank.png'; *

                                                    •   }*

                                                    }

                                                     

                                                    e michael

                                                    • 23. Re: Change image when form dropdown list value is selected
                                                      timlogochair Community Member

                                                      Thanks I'll give this a try after lunch.  I use a content management system called Joomla.  I am using a formbuilder tool inside joomla, which does let you "unpublish" elements (in a backend admin) which does prevent the code from being used or loaded at all.  Jquery is used in my template etc, but I know nothing about jquery.

                                                       

                                                      thanks for the tips here...I'll report back what I find!

                                                      • 24. Re: Change image when form dropdown list value is selected
                                                        timlogochair Community Member

                                                        What are all of the * symbols and • symbols?

                                                        • 25. Re: Change image when form dropdown list value is selected
                                                          timlogochair Community Member

                                                          I added those four lines as shown, but unfortunately this doesn't work to reset the other dropdowns.  Here is the function now (with that added code):

                                                           

                                                          function logo_prodImgBySel(objId,theValue) {

                                                            

                                                          var cobaseimages=["/j25cms/images/customimages/blank.jpg","/j25cms/images/customimages/11/base.jpg", "/j25cms/images/customimages/12/base.jpg", "/j25cms/images/customimages/13/base.jpg", "/j25cms/images/customimages/15/base.jpg", "/j25cms/images/customimages/20/base.jpg", "/j25cms/images/customimages/23/base.jpg", "/j25cms/images/customimages/24/base.jpg", "/j25cms/images/customimages/25/base.jpg", "/j25cms/images/customimages/27/base.jpg", "/j25cms/images/customimages/32/base.jpg", "/j25cms/images/customimages/35/base.jpg", "/j25cms/images/customimages/39/base.jpg", "/j25cms/images/customimages/41/base.jpg", "/j25cms/images/customimages/42/base.jpg", "/j25cms/images/customimages/48/base.jpg", "/j25cms/images/customimages/50/base.jpg", "/j25cms/images/customimages/51/base.jpg", "/j25cms/images/customimages/52/base.jpg", "/j25cms/images/customimages/54/base.jpg", "/j25cms/images/customimages/56/base.jpg", "/j25cms/images/customimages/57/base.jpg", "/j25cms/images/customimages/58/base.jpg", "/j25cms/images/customimages/60/base.jpg", "/j25cms/images/customimages/62/base.jpg", "/j25cms/images/customimages/64/base.jpg", "/j25cms/images/customimages/65/base.jpg", "/j25cms/images/customimages/68/base.jpg", "/j25cms/images/customimages/69/base.jpg", "/j25cms/images/customimages/71/base.jpg", "/j25cms/images/customimages/72/base.jpg", "/j25cms/images/customimages/74/base.jpg", "/j25cms/images/customimages/77/base.jpg", "/j25cms/images/customimages/78/base.jpg", "/j25cms/images/customimages/79/base.jpg", "/j25cms/images/customimages/80/base.jpg", "/j25cms/images/customimages/82/base.jpg", "/j25cms/images/customimages/83/base.jpg", "/j25cms/images/customimages/84/base.jpg", "/j25cms/images/customimages/90/base.jpg", "/j25cms/images/customimages/94/base.jpg"];

                                                           

                                                              var d=document;

                                                              theValue=cobaseimages[theValue];

                                                              if (!theValue || !d.getElementById ) return;

                                                              var obj = d.getElementById(objId);

                                                              if (obj) obj.src=theValue;

                                                                 if (theValue == 0){

                                                          d.getElementById('thePrimary').src='/j25cms/images/customimages/blank.png';

                                                          d.getElementById('theAccent').src='/j25cms/images/customimages/blank.png';

                                                                }

                                                          }

                                                          • 26. Re: Change image when form dropdown list value is selected
                                                            timlogochair Community Member

                                                            I can change my function for "clear_Onchange()" to be this (below), and it will work, sort of.  The only problem is that it changes the Fabric color and Accent color to the same selection number as the new Product Line drop down list selection, instead of changing the fabric and accent to be the default 0 selection.  I have not applied this to my page, in case you have further advice on your method.  If you'd like to see what this does, let me know and I can update the code to show you what I mean.

                                                             

                                                            function clear_OnChange()

                                                            {

                                                            var combo = document.getElementById('ff_elemPriColor');

                                                            combo.selectedIndex = "0";

                                                             

                                                            var combo2 = document.getElementById('ff_elemSecColor');

                                                            combo2.selectedIndex = "0";

                                                             

                                                            }

                                                            • 27. Re: Change image when form dropdown list value is selected
                                                              timlogochair Community Member

                                                              I went ahead and changed back to the function listed directly above in my last post. 

                                                               

                                                              Click here:

                                                              http://logochairs.com/j25cms/index.php/customform/test-form

                                                               

                                                              You can see what is happening is that the index position of the selected product is also being used to populate the Fabric Color and the Accent Color instead of going to the 0 position.

                                                               

                                                              Can you help me tweak this to zero out the Fabric and Accent drop downs when changed instead of following the number of the Product Line?

                                                               

                                                              Thanks so much for your help...I"m very close, I can feel it!

                                                              • 28. Re: Change image when form dropdown list value is selected
                                                                E. Michael Brandt Community Member

                                                                This has to be my last foray into code.  Hope it works.  If I understand

                                                                properly what you are looking for, it appears that I made one small, but

                                                                important, misstep in my last suggestion.  We simply need to remove the

                                                                test for value = 0, so instead try this:

                                                                 

                                                                function logo_prodImgBySel(objId,theValue) {

                                                                 

                                                                .

                                                                 

                                                                . {{your other code here}}}

                                                                 

                                                                .

                                                                 

                                                                d.getElementById('thePrimary').src='/j25cms/images/customimages/blank.png';

                                                                 

                                                                d.getElementById('theAccent').src='/j25cms/images/customimages/blank.png';

                                                                 

                                                                }

                                                                 

                                                                 

                                                                Hope this works.  If not, you should have enough to tweak the final changes

                                                                to finish it up.  Like you said, you're close. Good luck.

                                                                 

                                                                e michael