Replacing a dropdown menu with a text menu in JavaScript

Question

I'm trying to replace a drop down menu I have with a text field if someone chooses the "other" option. Right now in my code I have it replacing it with a paragraph element because I'm too lazy to find the exact constructor arguments for setting up a text field. However, when "other" is selected nothing happens.

Does anyone know what's wrong with this?

<html>
<head>
<script type="text/javascript">
function testfunc(arg) {
    if(arg.value == "other") {
        document.thing.replaceChild(document.test, document.thing.selection)
    }
    else {
        alert("stuff")
    }
}
</script>
<body>
<form name="thing">
<select name="selection" onchange="testfunc(document.thing.selection.options[document.thing.selection.selectedIndex])">
<option>yes</option>
<option>no</option>
<option>other</option>
</select>
</form>
<p name="test">lkjsdf</p>
</body>
</html>

score 2 · Answer 1 · edited Feb 09 '12 at 17:04

the function should be like this! Other not other ! its case sensitive (on linux anyway...not sure about other os) Otherwise thanks...been looking for this...cool way of show/hide

<script type="text/javascript">
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='Other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
</script>

score 0 · Answer 2 · answered Sep 11 '10 at 07:44

function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}

The HTML code here :

<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">

score 0 · Answer 3 · answered Apr 18 '11 at 12:33

Hey, I saw your code, you need some practice,

You forgot to close tagh. second always use ids instead of names. Third a form cannot access <p> tagh. fourth you can not access elements other then form, using form prefixes. 5th either you can create <p> tagh dynamicaly or palce it on page with display none. Check my code. Also this what you can do to dynamically genrate it.

var newP = document.createElement("p"); var txt = 'lkjsdf'; var newT = document.createTextNode(txt); newP.appendChild(newT);

<html>
<head></head>
<script type="text/javascript">
function testfunc(arg) {
    if(arg.value == "other") {
        document.thing.removeChild(document.thing.selection);
        document.getElementById('testText').style.display='inline';
    }
    else {
        alert("stuff");
    }
}
</script>
<body>
<form name="thing">
<select name="selection" onchange="testfunc(document.thing.selection.options[document.thing.selection.selectedIndex])">
<option>yes</option>
<option>no</option>
<option>other</option>
</select>
<p id="testText" style="display:none">lkjsdf</p>
</form>
</body>
</html>

Replacing a dropdown menu with a text menu in JavaScript

3 Answers3

Linked