I've got a form page with two dropdowns, where people first select a leaf shape, and it shows the image. For example, choosing "auriculate" makes images/leaf_shapes/entire/auriculate.jpg appear.

Then they choose the margin design, which could be "crenate" or "serrate" or "undulate" or several others. This changes the image to images/leaf_shapes/"their choice"/auriculate.jpg. I only want to change the specific.

I also want to accomodate if they change their mind, and click something else on that second margin menu.

I've got a simple script but it's creating a problem on three of the choices:
finely serrate, doubly serrate and lobed.

For finely serrate I want “margin_finelyserrate”
but it creates “margin_finelymargin_finelyserrate”

For doubly serrate I want “doubly_serrate”
but it creates “doubly_doubly_serrate”

For lobed I want”margin_lobed”
But it creates “margin_margin_lobed”

Below are the dropdown and the function I can't make work. here's the second dropdown:

<div id="megamenu4" class="megamenu">
                       <div class="column">
	               <ul>
                       <li id="margin1"><a href="javascript:passit4('entire')" onMouseover="change1('pic8','image34')" onclick="ShowContent('uniquename3'); change3('pic2','entire');" onMouseout="change1('pic8','image_off');">Test Aur (entire)</a></li>

          	       <li id="margin2"><a href="javascript:passit4('undulate')" onMouseover="change1('pic8','image35')" onclick="ShowContent('uniquename3'); change3('pic2','margin_undulate');" onMouseout="change1('pic8','image_off');">Undulate</a></li>
	               <li id="margin3"><a href="javascript:passit4('crenate')" onMouseover="change1('pic8','image36')" onclick="ShowContent('uniquename3'); change3('pic2','crenate');" onMouseout="change1('pic8','image_off');">Crenate</a></li>
	               <li id="margin4"><a href="javascript:passit4('finely dentate')" onMouseover="change1('pic8','image37')" onclick="ShowContent('uniquename3'); change3('pic2','margin_finelyserrate');" onMouseout="change1('pic8','image_off');">Finely Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('serrate')" onMouseover="change1('pic8','image38')" onclick="ShowContent('uniquename3'); change3('pic2','serrate');" onMouseout="change1('pic8','image_off');">Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('doubly serrate')" onMouseover="change1('pic8','image39')" onclick="ShowContent('uniquename3'); change3('pic2','doubly_serrate');" onMouseout="change1('pic8','image_off');">Doubly Serrate</a></li>
	               <li id="margin5"><a href="javascript:passit4('lobed')" onMouseover="change1('pic8','image40')" onclick="ShowContent('uniquename3'); change3('pic2','margin_lobed');" onMouseout="change1('pic8','image_off');">Lobed</a></li>	               

</ul>
                       </div>

and here's the function it calls:

function change3(picName,choice)

{ 
var url = (document[picName].src); 

url = url.replace(/crenate/, choice);
url = url.replace(/margin_finelyserrate/, choice);
url = url.replace(/margin_lobed/, choice);
url = url.replace(/margin_undulate/, choice);
url = url.replace(/doubly_serrate/, choice);
url = url.replace(/entire/, choice);
url = url.replace(/serrate/, choice);
url = url.replace(/lobed/, choice);
alert (url)
document[picName].src = url;

}

hah! I keep getting the answers right after I post my question! I have to put \b before and after the folder names because some of them duplicate so it makes the change and then tries to change it's own name as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.