Hi,
I am trying to figure out how to show or hide a selection of divs on my page depending on what is selected from a list/menu item, using css & javascript.
I have tried to use the script listed here: http://www.thescripts.com/forum/thread88791.html
but have been uable to customise it to my needs and could do with some help.
My form is asking people how many tickets they would like to an event & depending on their selection I need that number of divs (containing 3 feilds - guest name, company, email) to be displayed.
So far I have a list/menu with numbers from 1-20 as the values.
I then have a series of divs with ids of guest1 to guest20 all set to style="display: none"
When a number is selected from the list/menu I need that number of fields to be displayed so for example if someone selects 3 from the list/menu I will need guest1, guest2 and guest3 to change to style="display: block"
Can anyone help me out with the javascript?
Thanks!
4  13028 
If anyone is actually reading this post I have now found a solution that works:
Hey there, I think you need a different approach rather than hard-coding things like the way you are when you're working with such large numbers. Lets try something else. -
<html>
-
<script language="javascript">
-
function ticketInfo()
-
{
-
var fieldCount = document.getElementById("numTickets").value; //get the number user entered
-
var targetField = document.getElementById("infosection"); //This is the container holding the default values for the repeated section
-
var sourceCode = targetField.innerHTML; //Source code (default)
-
var newHTML = "";
-
for (var x=1;x<=fieldCount;x++) //For each ticket the user wants
-
{
-
newHTML = newHTML + sourceCode.replace("#",x); //Take the source code and replace the default icon (this case, #) and replace it with the current number.
-
}
-
targetField.innerHTML = newHTML; //Replace the curent default with the new html
-
targetField.className = "show"; //Then show it
-
document.getElementById("fieldSection").className = "hide"; //Hide the user section.
-
-
//Instead of using classname you can also just say .style.display = and then set to either block, inline or none.
-
}
-
</script>
-
<style type="text/css">
-
.hide
-
{
-
display:none;
-
}
-
.show
-
{
-
display:block;
-
}
-
</style>
-
<body>
-
<form name="form1">
-
<div id="fieldSection">
-
How many tickets? <input type="text" id="numTickets"/><input type="button"
-
-
value="Go" onClick="ticketInfo()"/>
-
</div>
-
<hr/>
-
<div id="infosection" class="hide">
-
<!--Field Section, Put your individual default fields here and remove this
-
-
comment-->
-
<h4>Ticket #:</h4>
-
First: <input type="text" name="firstField_#"/>
-
Second: <input type="text" name="secondField_#"/>
-
Third: <input type="text" name="thirdField_#"/>
-
<hr/>
-
</div>
-
</form>
-
</body>
-
</html>
rwt 2
New Member
Thanks a lot for your code.
I'm trying it out.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: work4u |
last post by:
My case is from the client site web page, there is a select menu, on a
form,
which dynamically show all data from a database
But the data under this select menu which need to follow a rule which
on a field on database,
that is mean everytime when i change the data on this field, select
menu will show different
order number due to rule change.
|
by: dje |
last post by:
In the OnClick event on a radioButtonList, I run a javascript to
show/hide the appropriate div along with a submit button, which
displays as expected. The problem is the submit no longer works on the
button. If I quit using the divs, and do a postback on the radiobutton
selection, showing/hiding tables instead, the button is ok and
continues to work. I've tried a variety of controls instead of the
button in a variety of places but it...
|
by: question |
last post by:
Hi!
I have a requirement where I need to display multiple forms one after
the other like a slide show. These are in the same application.
Basicall on selection of a menu item it should start then clicking on
any of th screens or tray icon it should stop.
I tried the following (To start it on pressing escape on form1 and end
it when escape is again
|
by: srampally |
last post by:
I need the capabilty to hide/show a selection list, just the way its
done at http://www.lufthansa.com (place the cursor over "Group
Companies"). However, I am looking for a javascript that is much
simpler. Here is what I have until now.
Problems with my code:
1. The selection list becomes invisible when I try to select an option
(in Firefox).
2. The selection list stays visible when I just place the cursor over
selection list and move...
|
by: devine |
last post by:
Hi All,
I am VERY new to Javascript.
I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
| | |
by: nithingujjar |
last post by:
Hi,
I need to to hide a field"addr_state1" based on a value in the drop down list field called "addr_country".i.e.,if addr_country.value=="in" then hide addr_state1 else , and if the value in the selection changes to something else then show the field addr_state1. Also the addr_state1 should be hidden when the page loads with value "IN", and if the page loads some other value than show the addr_state1 field.
Code used for this is :(I have to...
|
by: richard |
last post by:
I'm working on a menu system where I have a 3 column table affair.
On start, you see a menu list in column 1.
Column2 will have some general information.
Column3 is an iframe for final data input.
About every damn thing I've seen on how to do this is the pure bare
bones basics. That is, click button 1 to hide, click button 2 to show.
Not what I want.
Or, they simply toggle a division below the "switch".
|
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...
|
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,...
|
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,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
| | |
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
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...
| |
