javascript, style sheets and hiding table rows

[Ben]

I have a form for data entry which is in a table. I have a select box
to enter a customer name, which takes it's options from the customer
database. I have a button to add a new customer. What I want is for the
relevant customer fields to magically appear underneath the selelect
box
when the "add customer button" is pressed. For some reason my code is
NOT
working. Have been trying to do it with div tags and style sheets using
a javascript function. Any help would be greatly appreciated.

 

[Botan Guner]

If you post your code here we could find what is wrong.

 

[ASM]

I have a form for data entry which is in a table. I have a select box
to enter a customer name,

never I saw a select box ...
nor a select that would accept enters from visitor

which takes it's options from the customer
database. I have a button to add a new customer. What I want is for the
relevant customer fields to magically appear underneath the selelect
box
when the "add customer button" is pressed. For some reason my code is
NOT

<form>
<p>Name : <input type=text name="Name">
<input type=button value="add name ->"
onclick="added.value=Name.value">
<input type="text" name="added">
<p>
<input type=button value="add name ->"
onclick="var n = document.getElementById('NewName');
n.innerHTML='Your name is : '+Name.value">
<span id="NewName">Your name is : </span>

working. Have been trying to do it with div tags and style sheets using
a javascript function. Any help would be greatly appreciated.

and if it is really a select list of all customers :

<select onchange="var i=this.selectedIndex;
var n = document.getElementById('NewName');
if(i==0) alert('choice in list');
else
n.innerHTML='Your name is : '+this.options.value;">
<option blah ...

or :

<p><select name="choice" ... blah ... and options ... /select>
<input type=button value="add name ->"
onclick="
var n = document.getElementById('NewName');
var i = choice.selectedIndex;
if(i==0) alert('choice in list');
else
n.innerHTML='Your name is : '+choice.options.value;">
<span id="NewName">Your name is : </span>

 

[Ben]

Sorry, should have posted my code in the first place, here it is:

<form method="POST" action="">
<table>
<tr>

<td>customer_id:</td>
<td><select name="customer_id">
<option value =' 1232'>1232 &nbsp Simon</option><option value ='
43424'>43424 &nbsp George</option> </select></td>
<td>
<input type ="button" value =" Add a Customer">

</td>
</tr>

<!-- PLEASE CAN YOU HIDE EVERYTHING BETWEEN HERE -->

<tr>

<td>Customer Code</td>
<td><input name="customer_code"></td>
</tr>
<tr>

<td>Customer Description</td>
<td><input name="customer_description"></td>
</tr>
<tr>
<td>Customer Buyer Name</td>
<td><input name="customer_buyer_name"></td>

</tr>
<!-- AND HERE (WITHOUT LEAVING A SPACE) -->



<tr>
<td>style_id:</td>
<td><select name="style_id">
<option value =' 3434'>3434 &nbsp This is the style
description</option><option value =' 34342'>34342 &nbsp This is another
style description</option> </select></td>
<td>

<input type ="button" value =" Add a Style">
</td>
</tr>
<tr>
</table>
<form>

 

[RobG]

Sorry, should have posted my code in the first place, here it is:

<form method="POST" action="">
<table>
<tr>

<td>customer_id:</td>
<td><select name="customer_id">
<option value =' 1232'>1232 &nbsp Simon</option><option value ='
43424'>43424 &nbsp George</option> </select></td>
<td>
<input type ="button" value =" Add a Customer">

Add an onclick event:

<input type ="button" value =" Add a Customer" onclick="
showHide( 'newCustFields' );
"></td>

the show/hide function is below. I've enclosed the TR in a TBODY
element, that way you can add a number of rows and show/hide them all
in one go (as long as they are inside the tbody). Be aware that
hiding the rows does not disable the form controls - any data that's
in them will be sent back to the server, so I disable/re-enable any
input form controls inside the tbody when it is hidden/shown.

You will have to account for any others that you add - textarea,
checkboxes, etc. or have a flag somewhere that tells you whether or
not to ignore the values.

You should feature check getElementById, getElementsByTagName and
style before using them. I've tested in the init function, so if the
require features aren't supported, the fields aren't hidden - perhaps
the new customer do-dad can be a checkbox, that way the form can be
fully functional without JavaScript.

You may want to add support for document.all and older browsers.


[...]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">


<script type="text/javascript">

function hideFormFields() {

// Make sure required features are supported
if ( ! document.getElementsByTagName ||
! document.getElementById ||
! document.body.style ) {
return;
}

// Process whatever ids were passed to the function
var i = arguments.length;
while ( i-- ) {
showHide( arguments );
}
}

function showHide( elId ) {
var el = document.getElementById( elId );
var fc = el.getElementsByTagName('input');
var disabledState;
var i = fc.length;
if ( 'none' == el.style.display ) {
el.style.display = '';
disabledState = false;
} else {
el.style.display = 'none';
disabledState = true;
}
while ( i-- ) {
fc.disabled = disabledState;
}
}

window.onload = function() {
hideFormFields( 'newCustFields' );
}

</script>
</head>
<body>


<form method="POST" action="">
<table>
<tbody id="main">
<tr>
<td>customer_id:</td>
<td><select name="customer_id">
<option value ='1232'>1232 &nbsp Simon</option>
<option value ='43424'>43424 &nbsp George</option>
</select></td>
<td>
<input type ="button" value =" Add a Customer" onclick="
showHide( 'newCustFields' );
"></td>
</tr>
</tbody>
<tbody id="newCustFields">
<!-- PLEASE CAN YOU HIDE EVERYTHING BETWEEN HERE -->
<tr>
<td>Customer Code</td>
<td><input name="customer_code"></td>
</tr>
<tr>
<td>Customer Description</td>
<td><input name="customer_description"></td>
</tr>
<tr>
<td>Customer Buyer Name</td>
<td><input name="customer_buyer_name"></td>
</tr>
</tbody>
<tbody>
<!-- AND HERE (WITHOUT LEAVING A SPACE) -->
<tr>
<td>style_id:</td>
<td><select name="style_id">
<option value =' 3434'>3434 &nbsp This is the style
description</option>
<option value =' 34342'>34342 &nbsp This is another style
description</option>
</select></td>
<td>
<input type ="button" value =" Add a Style"></td>
</tr>
</tbody>
</table>
<form>




</body></html>

 

[Ben]

Thank you!!
That works perfectly.