show/hide textfield [Archive]

telly

04-26-2005, 08:32 AM

the idea is to hide/show a textfield on selected drop down menu. e.g; if i choose data1, a textfield will appear, if i choose other than that, no textfield is displayed. is there any function to do this? i managed to display the selected value only, but it doesn't really help.

thanx in advance for any reply

Bill Posters

04-26-2005, 09:16 AM

e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">

function doCheck() {
var myTextelem = document.getElementById('myText');
var mySelectelem = document.getElementById('mySelect');
(mySelectelem.value == 'show') ? myTextelem.style.display = 'inline' : myTextelem.style.display = 'none';
}

</script>
</head>
<body>

<form action="/" method="post">
<fieldset>

<select name="mySelect" id="mySelect" onchange="doCheck();">
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>

<input type="text" value="Can you see me?" name="mytext" id="myText" />

</fieldset>
</form>

</body>
</html>

Kor

04-26-2005, 09:22 AM

here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function showhide(f,v){
var t = f.elements['txtfield'];
if(v=='data1'){t.style.visibility='visible'}
else{t.style.visibility='hidden'}
}
onload = function(){document.forms[0].elements['txtfield'].style.visibility='hidden'}
</script>
</head>
<body>
<form><select name="sel" onchange="showhide(this.form,this.value)">
<option>- select -</option>
<option value="data1">data1</option>
<option value="data2">data2</option>
<option value="data3">data3</option>
</select>
<input name="txtfield" type="text">
</form>
</body>
</html>

telly

04-26-2005, 10:09 AM

have tested both codes and worked well. thanx for the ideas. just a query, is there a way to display the textfield that match the value, as from the posted example; if(v=='data1'){t.style.visibility='visible'}
to if(v like '%data1%' ){t.style.visibility='visible'}

or is there any js way to do this?

Kor

04-26-2005, 10:17 AM

display the textfield that match the value,

What do u mean by display?

Bill Posters

04-26-2005, 10:36 AM

css:
#data2 {
display: none;
}

javascript:
function doCheck() {

var data1elem = document.getElementById('data1');
var data2elem = document.getElementById('data2');
var mySelectelem = document.getElementById('mySelect');

if (mySelectelem.value == 'data1') {
data1elem.style.display = 'inline'; // this can be changed to 'block' depending on your form layout
data2elem.style.display = 'none';
} else {
data1elem.style.display = 'none';
data2elem.style.display = 'inline'; // this can be changed to 'block' depending on your form layout
}
}

markup:
<select name="mySelect" id="mySelect" onchange="doCheck();">
<option value="data1">data1</option>
<option value="data2">data2</option>
</select>

<input type="text" value="This is data1" name="data1" id="data1" />
<input type="text" value="This is data2" name="data2" id="data2" />

If you plan on having several optional input fields, then it may be more efficient javascript to loop through all options, changing their display value to none and then simply changing the display of the one selected form element back to inline (or block).

telly

04-26-2005, 10:46 AM

currently the drop down menu is like this,
<SELECT NAME='textfield'>
<option value='Asia,Singapore' >Asia - Singapore</option>
<option value='Europe,Canada' >Europe - Canada</option>
<option value='Africa,Kenya' >Africa - Kenya</option>
</SELECT>

so, i'm thinking is there a way to display the texfield if the value contains word 'Asia' for example.

Kor

04-26-2005, 10:50 AM

if(v.indexOf('Asia')>-1){t.style.visibility='visible'}

telly

04-26-2005, 11:10 AM

got it, thanx Kor. :thumbsup: