Hi,
I have a form where the user can select a product and the product info will appear next to it.
The products and the data on them all come from a db so I needed it to be dynamically.
After a quick search in Google I found half answer - I managed to display the product data but if the user selected another product the previous product data stayed and more data appeared.
I need to know how I hide data when another product is selected.
Here is the code so far: -
<html>
-
<head>
-
<title>Test Form</title>
-
<script language="javascript">
-
function show(selObj) {
-
var selectedValue = selObj.options[selObj.selectedIndex].value;
-
document.getElementById(selectedValue).style.display = 'block';
-
}
-
</script>
-
</head>
-
<body>
-
<?php
-
$db = New DB;
-
$db->table="products";
-
$titles = $db->FetchTitles();
-
$titlesInfo = $db->Fetch();
-
?>
-
<form>
-
Select Product: <select id="products" name="MyProducts[]" onchange="show(this)">
-
<?php
-
foreach ($titles as $key => $value) {
-
print("<option value=\"$key\">$value</option>\n");
-
}
-
?>
-
</select><br />
-
<?php
-
foreach ($titlesInfo as $key => $value) {
-
print("<div id=\"$key\" style=\"display:none;\">");
-
foreach ($value as $keyf => $valuef) {
-
print($keyf . ": " . $valuef . " | \n");
-
}
-
print("</div>\n");
-
}
-
?>
-
</form>
-
</body>
-
</html>
-
Thanks :)
3  3285 
Try this instead by replacing your current SCRIPT block: -
<script language="javascript">
-
global_var_last_shown = '';
-
-
function show(selObj) {
-
if(global_var_last_shown!='')
-
document.getElementById(global_var_last_shown).style.display = 'none';
-
-
var selectedValue = selObj.options[selObj.selectedIndex].value;
-
-
document.getElementById(selectedValue).style.display = 'block';
-
-
global_var_last_shown = selectedValue;
-
}
-
</script>
-
I believe this should work because we keep a global variable to "remember" the last "element" shown. When the function is called the first time, the if statement never fires. After the function completes for the first time, the global variable now contains a value ( is not = ''). That means the next time the function fires off, the if statement will fire off.
Hi.
Thanks for your quick replay, it's working perfectly.
I have one more thing I want to add - giving the user the option to select number of products (dynamically), the best I can do is this: -
function addInput(divName){
-
var newdiv = document.createElement('div');
-
newdiv.innerHTML = document.getElementById(divName).innerHTML
-
document.getElementById(divName).appendChild(newdiv);
-
counter++;
-
}
-
Of course I added a div before the select and a button with onClick event to call this function.
The problem is that it's doubling itself - showing 1, 2, 4, 8 and so on...
And it's displaying the hidden content of the first selection.
Got a solution?
Thanks :)
Please create a new thread for this solution.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Owen Funkhouser |
last post by:
I have a form with three radio options. And I have three buttons:
<input type="submit" name="mainform_action" value="Edit Data">
<input type="submit" name="mainform_action" value="View Data">
<input type="submit" name="mainform_action" value="Delete Data">
If the first radio button is selected, I only want all three buttons to be
visible...
|
by: Jim Cobban |
last post by:
I am trying to create a web page in which the contents of one selection list
depends upon which element in another selection list is chosen, but where
the information to populate the first selection list comves from an SQL
database on the web server.
There are a couple of these situations in my application but, for example,
the first list...
|
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...
|
by: Lynn |
last post by:
Hello,
I have a user control that contains a table, and some text fields. I would
like to show or hide a particular row of this table, based on a selection
the user makes on my page.
Here's the situation...I have a page that has some panels that are hidden.
The first panel is visible...the user selects a city, and presses submit.
The...
|
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...
| | |
by: nubianqnn |
last post by:
Hello All,
I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related dropdown with two options. If a user selects the second option from the second dropdown, then I want to show a data field. Somehow this is not working...
|
by: nubianqnn |
last post by:
I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related dropdown with two options. If a user selects the second option from the second dropdown, then I want to show a data field. Somehow this is not working quite right. I am...
|
by: rupak |
last post by:
Hi!
I have a multiple selection of checkboxes
<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName'/>
<input type='checkbox' name='coffee'...
|
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...
|
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...
|
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. ...
| | |
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...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
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...
|
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...
|
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...
|
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
| |
