(Dis)appearing text boxes [Archive]

Click to See Complete Forum and Search --> : (Dis)appearing text boxes

rpj999

09-10-2004, 05:56 AM

Hi All,

Here's a challenge which I hope someone can help me with. I've got a piece of code on my form which, when the last option in a drop-down list is selected, an extra text field appears to enter an 'Other..' option.

What I'd also like to see is that when option 4 is selected (Name), two text fields appear so that the person completing the form can enter a first and last name.

Is this possible???

Thanks for any ideas!

Rob
---------------------------------------

<html><body>
<script type="text/javascript" language="JavaScript">
function activate(field) {
field.disabled=false;
if(document.styleSheets)field.style.visibility = 'visible';
field.focus(); }
function last_choice(selection) {
return selection.selectedIndex==selection.length - 1; }
function process_choice(selection,textfield) {
if(last_choice(selection)) {
activate(textfield); }
else {
textfield.disabled = true;
if(document.styleSheets)textfield.style.visibility = 'hidden';
textfield.value = ''; }}
function valid(menu,txt) {
if(menu.selectedIndex == 0) {
alert('You must make a selection from the menu');
return false;}
if(txt.value == '') {
if(last_choice(menu)) {
alert('You need to type your choice into the text box');
return false; }
else {
return true; }}
else {
if(!last_choice(menu)) {
alert('Incompatible selection');
return false; }
else {
return true; }}}
function check_choice() {
if(!last_choice(document.forms[0].P_PUB_ID)) {
document.forms[0].p_choicetext.blur();
alert('Please check your menu selection first');
document.forms[0].P_PUB_ID.focus(); }}
</script>

<form>
<table>
<td>
<select name="P_PUB_ID" style="width: 201px;" onchange="process_choice(this,document.forms[0].p_choicetext)">
<option selected>Select
<OPTION VALUE="1">First
<OPTION VALUE="2">Second
<OPTION VALUE="3">Third
<OPTION VALUE="4">Name
<OPTION VALUE="99999">Other, please specify:
</select>
<noscript>
</td>
<td valign="top"><input type="text" name="p_choicetext" size="22" class="textbox">
</noscript><script type="text/javascript" language="JavaScript"></script>
</td></table></form></body></html>

Charles

09-10-2004, 07:43 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">

</style>

</head>
<body onload="document.getElementById('firstName').className = document.getElementById('lastName').className = document.getElementById('other').className = 'hide'">
<form action="someScript.pl">
<fieldset>
<legend>Example</legend>

<label>Data<select onchange="if (this.selectedIndex == 0) document.getElementById('firstName').className = document.getElementById('lastName').className = ''; if (this.selectedIndex == 3) document.getElementById('other').className = ''">
<option>Name</option>
<option>Rank</option>
<option>Serial Number</option>
<option>Other</option>
</select></label>

<label id="firstName">First Name<input type="text"></label>
<label id="LastName">Last Name<input type="text"></label>
<label id="other">Other<input type="text"></label>

<button type="submit">Suubmit</button>
</fieldset>
</form>
</body>
</html>

Paul Jr

09-10-2004, 01:26 PM

Bit of a capitalization error: The ID "LastName" is being accessed as "lastName" in the onload and onchange event handlers.