Member Avatar for turpentyne

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;

}
Edited by turpentyne because: n/a
  • 1 Contributor
  • 1 Reply
  • 124 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by turpentyne

Dani AI

Generated

A plain substring replace on an image URL will sometimes hit parts of longer folder names and produce duplicated or mangled segments. The safe approach is to treat the path as segments and only change the exact segment that holds the folder name (for example, the folder just before the image filename). already identified that the symptom comes from accidental partial matches; the examples below show two reliable ways to avoid that.

Use the browser to parse and rewrite the path segments. This is robust and avoids any substring collisions:

function replaceFolderBeforeFilename(imgElement, newFolder) {
  var a = document.createElement('a');
  a.href = imgElement.src;
  var parts = a.pathname.split('/');
  if (parts.length >= 2) {
    parts[parts.length - 2] = encodeURIComponent(newFolder);
    a.pathname = parts.join('/');
    imgElement.src = a.href;
  }
}

If you prefer a single-regex replacement, target the path segment immediately before the final filename using a lookahead so only that segment is swapped:

function replaceFolderWithRegex(srcUrl, newFolder) {
  var parts = srcUrl.split(/[?#]/); // preserve query/hash
  parts[0] = parts[0].replace(/\/[^\/]+(?=\/[^\/]*$)/, '/' + encodeURIComponent(newFolder));
  return parts.join('');
}

Notes and troubleshooting:

  • Encode the replacement (use encodeURIComponent) if names can contain spaces or special chars.
  • Make sure the URL you test does not end with a trailing slash (or adapt the logic), and handle query strings/hashes as shown.
  • In modern code you can use the URL constructor for clearer semantics (URL API). For regex details and assertions see MDN’s regex guide (lookahead and lookbehind).
  • Log the original and new URL while testing to confirm only the intended segment changed.
Member Avatar for turpentyne

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.