Log in

View Full Version : 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


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



<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.


onchange="otherFormCode('other')">

...highlighted should be changed to payment.

Also, change this part:


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


...to:


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:


<!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