Skip navigation
Currently Being Moderated

Change image when form dropdown list value is selected

Nov 12, 2009 9:06 AM

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

 
Replies
  • Currently Being Moderated
    Nov 12, 2009 6:48 PM   in reply to soulfunkifiedjazz

    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

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 12, 2009 9:50 PM   in reply to soulfunkifiedjazz

    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

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2011 5:46 AM   in reply to E. Michael Brandt

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 12:47 PM   in reply to E. Michael Brandt

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 24, 2012 4:06 PM   in reply to timlogochair

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 12:35 PM   in reply to Nancy O.

    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; 
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 11:24 AM   in reply to timlogochair

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 11:30 AM   in reply to timlogochair

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

    and check the source code.

     

    e michael

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 11:50 AM   in reply to E. Michael Brandt

    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('thePrimary',this.selectedIndex);logo_prodImgSec('theAccen t',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>


     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 1:53 PM   in reply to timlogochair

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 3:02 PM   in reply to timlogochair

    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.co m%2Fj25cms%2Findex.php%2Fcustomform%2Ftest-form

     

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 6:08 AM   in reply to Nancy O.

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 7:38 AM   in reply to timlogochair

    >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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 7:52 AM   in reply to E. Michael Brandt

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2012 7:59 AM   in reply to timlogochair

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 7:37 AM   in reply to E. Michael Brandt

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 9:02 AM   in reply to timlogochair

    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.selectedInde x);}

     

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

     

     

    e michael

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 9:21 AM   in reply to E. Michael Brandt

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 9:50 AM   in reply to timlogochair

    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.p ng'; *

    •   }*

    }

     

    e michael

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 10:08 AM   in reply to E. Michael Brandt

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 10:40 AM   in reply to E. Michael Brandt

    What are all of the * symbols and • symbols?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 11:09 AM   in reply to E. Michael Brandt

    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';

          }

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 12:33 PM   in reply to timlogochair

    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";

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 2:41 PM   in reply to timlogochair

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 3:40 PM   in reply to timlogochair

    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.p ng';

     

    }

     

     

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 24, 2014 7:46 AM   in reply to soulfunkifiedjazz

    You can create an Animation using CSS3 as well. See a Demo here http://www.tutorialspark.com/css3Reference/CSS3_animation-duration_Pro perty.php

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points