473,837 Members | 1,667 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.

Jul 23 '05 #1
5 2176
If you post your code here we could find what is wrong.

Jul 23 '05 #2
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.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>
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.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
Jul 23 '05 #3
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
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, 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
Jul 23 '05 #5
Ben
Thank you!!
That works perfectly.

Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2648
by: Henk Verhoeven | last post by:
(Reply on this newsgroup to an email - reply by email did not work) Wolfman wrote: > > Hi, > I found your Email in the php Newsgroup. > I was looking for some way to resize some graphiks on my HP , to fit the actual Browser size. So I found this: > > <HTML><HEAD></HEAD>
1
6095
by: bin_P19 P | last post by:
the code i have got is as follows and now im stuck <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Shopping Cart</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="StyleSheet" href="css/style.css" type="text/css">
19
6938
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the JavaScript in this code from a couple different sites but I'm not 100% sure what each line is doing...This is the ASP code that I'm using for the page....Take a look at the JavaScript code and please let me know what each line is doing....I have been...
8
2522
by: Andy Fish | last post by:
Hi, I am trying to show/hide a group of table rows using javascript and CSS. if I group them in a <tbody> element I can do: my_tbody_element.style.display="none"; to hide them and my_tbody_element.style.display="block";
5
2564
by: googlegroups | last post by:
I have a large table in html created dynamically. This table can grow to several hundred rows or more. I have the ability to hide or display individual rows (using row.style.display = "none") and this works well in both IE and Firefox. I would also like to do the same with columns as well. I did some research and col and colgroup nodes are not supported fully in both browsers. Also, doing "visibility: hidden" and sometimes "display:...
15
4241
by: binnyva | last post by:
Hello Everyone, I have just compleated a JavaScript tutorial and publishing the draft(or the beta version, as I like to call it) for review. This is not open to public yet. The Tutorial is avaliable at... http://www.geocities.com/binnyva/code/javascript/advanced_tutorial/ If any of you could spare the time, please have a look at my tutorial
4
8940
by: Greg | last post by:
I'm guessing the problem I'm having has something to do with Master Pages or DetailsView because the exact same code works fine on a page without a Master Page and DetailsView controls. The problem is, when the javascript fires on the txtDateRequiredOut TextBox in IE, I get "Error on Page" in the status bar and the error says: "Object Expected". Viewing the source of the page while running shows a link created properly for the linked...
4
2918
by: poojak | last post by:
I have write two different js function in a external file. one function write a table (I used innerHTML for this.) and another function is for showing/ hideing some rows depending on radio button selection. Both of these function works properly when used in HTML file, but when I use same showhide function in a table which is created by Javascript that function doesn't work at all. I am copying both JS functions here also, If someone can solve...
3
3935
by: nigelesquire | last post by:
Please help! I'm trying to clone and delete multiple rows with JavaScript. I need two delete buttons that work...! I only have one for now, but it's not working properly, the output count is messing up. Problems:
0
9846
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9685
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10886
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10580
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10634
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7817
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5674
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4052
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3126
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.