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]

Re: javascript, style sheets and hiding table rows

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

[ASM]

Re: javascript, style sheets and hiding table rows

Ben wrote:[color=blue]
> I have a form for data entry which is in a table. I have a select box
> to enter a customer name,[/color]

never I saw a select box ...
nor a select that would accept enters from visitor
[color=blue]
> 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[/color]

<form>
<p>Name : <input type=text name="Name">
<input type=button value="add name ->"
onclick="added. value=Name.valu e">
<input type="text" name="added">
<p>
<input type=button value="add name ->"
onclick="var n = document.getEle mentById('NewNa me');
n.innerHTML='Yo ur name is : '+Name.value">
<span id="NewName">Yo ur name is : </span>
</form>
[color=blue]
> working. Have been trying to do it with div tags and style sheets using
> a javascript function. Any help would be greatly appreciated.[/color]

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

<select onchange="var i=this.selected Index;
var n = document.getEle mentById('NewNa me');
if(i==0) alert('choice in list');
else
n.innerHTML='Yo ur name is : '+this.options[i].value;">
<option blah ...

or :

<p><select name="choice" ... blah ... and options ... /select>
<input type=button value="add name ->"
onclick="
var n = document.getEle mentById('NewNa me');
var i = choice.selected Index;
if(i==0) alert('choice in list');
else
n.innerHTML='Yo ur name is : '+choice.option s[i].value;">
<span id="NewName">Yo ur name is : </span>



--
Stephane Moriaux et son [moins] vieux Mac

[Ben]

Re: javascript, style sheets and hiding table rows

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]

Re: javascript, style sheets and hiding table rows

Ben wrote:[color=blue]
> 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">[/color]

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, getElementsByTa gName 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><ti tle>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.getEle mentsByTagName ||
! document.getEle mentById ||
! document.body.s tyle ) {
return;
}

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

function showHide( elId ) {
var el = document.getEle mentById( elId );
var fc = el.getElementsB yTagName('input ');
var disabledState;
var i = fc.length;
if ( 'none' == el.style.displa y ) {
el.style.displa y = '';
disabledState = false;
} else {
el.style.displa y = 'none';
disabledState = true;
}
while ( i-- ) {
fc[i].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="newCustFiel ds">
<!-- 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>


--
Rob

[Ben]

Re: javascript, style sheets and hiding table rows

Thank you!!
That works perfectly.