Dropdown menu problem

**flaming01** · 11-07-2008, 02:39 PM

Hi Everyone,

I'm trying to get a check done in java script but i am very stuck and have no idea on how to go about it.

the idea behind it is to check the value of a dropdown menu so that when "other" is selected a text box appears in below to allow users to enter some information

here is the code

Code:

function otherFormCode(id){
		var elem = document.getElementById(id);
		var servi = elem.selectedIndex;
		var otherBox = "<table>";
		
	if (servi != 5){
			otherBox = otherBox+"<tr><td>Other:</td><td><input type='hidden' name='otherbox' value='N/A' /></td></tr>";
			document.form1.otherbox.innerHTML = otherBox;
			return otherBox;
			}

			else 
			{
			otherBox = otherBox+"<tr><td>Other:</td><td><input type='text' name='otherbox' /></td></tr>";
			document.form1.otherbox.innerHTML = otherBox;
			return otherbox
			}
			}

and the html to go with it

Code:

            <table class="upper">
            <tr>
            <td>Trans Number</td> <td class="input"><input type="text" name="trans_id" id="trans-text" /></td>
            </tr>
            <tr>
            <td>Payment:</td><td class="input"><select name="payment" id="payment" onchange="otherFormCode('other')">
            <option>--Please Select--</option>
            <option value="invoice">Invoice Payment</option>
            <option value="hardware">Hardware</option>
            <option value="software">Software</option>
            <option value="services">Services</option>
            <option value="other">Other</option>
            </select></td>
            </tr>
            <div id="otherbox">
            </div>

any help would be brilliant

Thanks
James

**rangana** · 11-07-2008, 04:04 PM

You pass the wrong ID on the function.

Code:

onchange="otherFormCode('other')">

...highlighted should be changed to payment.

Also, change this part:

Code:

else 
{
otherBox = otherBox+"<tr><td>Other:</td><td><input type='text' name='otherbox' /></td></tr>";
document.form1.otherbox.innerHTML = otherBox;
return otherbox
}

...to:

Code:

else 
{
otherBox = otherBox+"<tr><td>Other:</td><td><input type='text' name='otherbox' /></td></tr>";
document.getElementById('otherbox').innerHTML = otherBox;
//return otherbox
}

**flaming01** · 11-07-2008, 04:20 PM

still not working which makes no sense

here is a link to a demo page with it on that i'm working on

http://eyeneye.co.uk/demo/

**rangana** · 11-08-2008, 02:54 AM

Actually, it's working on FF.

Anyway, the best thing to do is to create the table via DOM, or show/hide the table based on the selected option:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unknown</title>
<script type="text/javascript">
function otherFormCode(id)
{
var elem = document.getElementById(id);
var servi = elem.selectedIndex;
if (servi != 5)
	{
	hideTables(); // Hide the tables
	document.getElementById('hid').style.display='';
	}
else 
	{
	hideTables(); // Hide the tables
	document.getElementById('other').style.display='';
	}
}
function hideTables()
{
var tables=['hid','other']; // ID of the table you want to hide
for(var i=0;i<tables.length;i++)
	document.getElementById(tables[i]).style.display='none';
}
window.onload=hideTables;
</script>
</head>
<body>
<table class="upper">
        <tr>
            <td>Trans Number</td> <td class="input"><input type="text" name="trans_id" id="trans-text" /></td>
            </tr>
            <tr>
            <td>Payment:</td><td class="input"><select name="payment" id="payment" onchange="otherFormCode('payment')">
            <option>--Please Select--</option>
            <option value="invoice">Invoice Payment</option>
            <option value="hardware">Hardware</option>
            <option value="software">Software</option>
            <option value="services">Services</option>
            <option value="other">Other</option>
            </select></td>
            </tr>
			
			<!--These are the tables that the script is pointint to-->
			<table id="hid">
			<tr><td>Other:</td><td><input type='hidden' name='otherbox' value='N/A' /></td></tr></table>
			</table>
			
			<table id="other">
			<tr><td>Other:</td><td><input type='text' name='otherbox' /></td></tr>
			</table>
			<!--end-->
</body>
</html>

Hope that helps.

**flaming01** · 11-10-2008, 11:20 AM

thank you so much that's a massive help

it's all working now, all thats left is to lay it all out haha

thanks again

James

Thread: Dropdown menu problem

Thread Tools

Search Thread

Dropdown menu problem

Bookmarks

Bookmarks

Posting Permissions