Member Avatar for jonsan32

Can my dropdown menu produce a link instead of textbox? Is it possible? If so, how?

<script type="text/javascript">
function fifa()
{
    var frm = document.forms[0];
    var abc = frm.browsers.value;
    if (abc === "A")
        frm.text1.value = "";
    else if (abc === "B")
        frm.text1.value = "";
    else if (abc === "C")
        frm.text1.value = "";
    else if (abc === "D")
        frm.text1.value = "";
    else if (abc === "E")
        frm.text1.value = "";
    else if (abc === "F")
        frm.text1.value = "";
    else if (abc === "G")
        frm.text1.value = "";
    else if (abc === "H")
        frm.text1.value = "";
    else if (abc === "I")
        frm.text1.value = "";

}
</script>

<center>
<form name="form1">
Subscribe to your calendar link:
<select id="browsers" onchange="fifa()">
<option value="0">- choose a tutor -</option>
<option value="A">Ashley C.</option>
<option value="B">Danielle C.</option>
<option value="C">Jon S.</option>
<option value="D">Mekenna M</option>
<option value="E">Norma C.</option>
<option value="F">Tyler K.</option>
<option value="G">Vanessa A.</option>
<option value="H">Veronica G</option>
<option value="I">William K.</option>
</select><br><br>

<textarea name="text1" style="width:400px; height:100px;">

</textarea>
</form>
  • 2 Contributors
  • 2 Replies
  • 262 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by jonsan32

Dani AI

Generated

Yes — swap the textarea for a link (or a container you populate with an <a>) and update the link when the select changes. was on the right track by replacing the textarea with a div and using a map of values, and confirmed it worked. Two important improvements: keep the map values as plain URLs (not prebuilt <a> HTML) and update the DOM with properties (or createElement) instead of using innerHTML — that avoids nested-anchor bugs and XSS risks.

Keep it simple and safe: map option values to URL strings, create a single anchor node once, then update its href and textContent on change. Using textContent (not innerHTML) prevents injected HTML from executing. Use addEventListener rather than inline onchange for better separation, and add rel="noopener noreferrer" when opening in a new tab.

Example pattern you can drop into the page (uses placeholder URLs so it won’t repeat the forum’s originals):

// mapping: keys match your <option value="...">
const calendarUrls = {
  A: 'https://example.com/a.ics',
  B: 'https://example.com/b.ics',
  C: 'https://example.com/c.ics'
};

const select = document.getElementById('browsers');   // your <select>
const container = document.getElementById('link');    // replacement div

// create a single <a> to reuse
const a = document.createElement('a');
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.style.wordBreak = 'break-all';
container.appendChild(a);

select.addEventListener('change', () => {
  const url = calendarUrls[select.value];
  if (url) {
    a.href = url;
    a.textContent = url;
    a.hidden = false;
  } else {
    a.removeAttribute('href');
    a.textContent = '';
    a.hidden = true;
  }
});

Troubleshooting tips: make sure option values exactly match your mapping keys; handle the default option (value "0") by hiding the link; use console.log to inspect the selected value during testing; and include a <noscript> fallback or server-side fallback if users might have JavaScript disabled.

Recommended Answers

All 2 Replies

Member Avatar for theHop

I've ended shortening then script at the same time. I swapped your textarea out in favour of a div and put all your urls in a object literal. (could have been an associative array. Makes no difference really.

<script type="text/javascript">

links = {
        A:"",            
        B:"",
        C:"",
        D:"",
        E:"",
        F:"",
        G:"",
        H:"",
        I:""    
};

function fifa()
{
    var link = document.getElementById("link");
    var frm = document.forms[0];
    var abc = frm.browsers.value;
    link.innerHTML = "<a href=\"" + links[abc] + "\">" + links[abc] + "<\/a>";
}
</script>
</head>
<body>
<center>
<form name="form1">
Subscribe to your calendar link:
<select id="browsers" onchange="fifa()">
<option value="0">- choose a tutor -</option>
<option value="A">Ashley C.</option>
<option value="B">Danielle C.</option>
<option value="C">Jon S.</option>
<option value="D">Mekenna M</option>
<option value="E">Norma C.</option>
<option value="F">Tyler K.</option>
<option value="G">Vanessa A.</option>
<option value="H">Veronica G</option>
<option value="I">William K.</option>
</select><br><br>

<div id="link" style="width:400px; height:100px;">
</div>
</form>
Member Avatar for jonsan32

Perfect. And awesome!

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.