By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,959 Members | 1,139 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,959 IT Pros & Developers. It's quick & easy.

javascript, style sheets and hiding table rows

P: n/a
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.

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
If you post your code here we could find what is wrong.

Jul 23 '05 #2

P: n/a
ASM
Ben wrote:
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>
</form>
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[i].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[i].value;">
<span id="NewName">Your name is : </span>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #3

P: n/a
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>

Jul 23 '05 #4

P: n/a
Ben wrote:
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[i] );
}
}

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[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="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>
--
Rob
Jul 23 '05 #5

P: n/a
Ben
Thank you!!
That works perfectly.

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.