fjm 348
Contributor
I got a winner here..
I need a solution that will use a single html select and two input fields that depend on the value selected.
This dropdown will have 3 values. If a certain values is selected, I need two input boxes to appear. If either of the other two values are selected, then no additional input boxes should be added.
This sounds like a job for AJAX i'm sure but I haven't a clue about AJAX.
What I have now is a select tag with a js onchange event that fires when the user selects the value from the select box. With php, I test for the POST var and if it is the value where I need the additional input boxes, I echo them. This is all well and good until I need to submit the page.
In theory, I setup the page using the onchange and then submit the entire page after it has been completed. This is where I have my problem because to do it like this, I would need to nest form tags and I don't think this is correct.
Does someone have a code sample they could share with me or point me in the direction that I need to go?
Thanks,
Frank
18 1562
Will both values be coming from the database? In which case AJAX would be the best approach.
fjm 348
Contributor
Will both values be coming from the database? In which case AJAX would be the best approach.
Hi r035198x,
No, actually, none of these will require db access to populate. I am populating the select box with hard coded values. There will be 3 option values (1,2, and 3).
When the user selects option #2 I need to show another two selects to the user. Just for clarification, when option #2 is selected it is only acting as a trigger so to speak to show the additional selects. (And also using the value for $_POST when the form is submitted.
In other words, if option #2 is NOT selected, I don't want to see the additional two selects. Of course, if it is, show them.
When the entire form is completed, the values from all of the selects, whether a single select or all three need to be submitted.
I am not sure how to handle this....
Thanks for the help r035198x!
Frank
Perhabs this may be useful.
Instead of using the style display: block, none you can also use style visibility: visible, hidden.
I used display since it does not hold the space of the elements.
[HTML]<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Select 1:
<select name="select1" onchange="if (this.value == 2) { document.getEle mentById('other _two').style.di splay='block'; } else { document.getEle mentById('other _two').style.di splay=none; } ">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
</div><br>
<input type="submit" name="submit" value="submit">
</form>[/HTML]
You don't need to post to the server to get that functionality. All you need is Javascript.
fjm 348
Contributor
r035198x,
Thanks again for the help. Javascript was never a passion of mine so I am not really sure what I should use in this case. Is there a term I can search for?
Samatair,
Thanks for the snippet. It seems to work great. The only issue that I can forsee would be if the user made a mistake and entered the wrong value option, the two additional selects would render and will not go away which would force a post value on both of the selects.
It certainly is cool to know that about css. Thank you! If all else fails and I can't find a js solution, I will definetley be using yours. :)
Frank
I have missed single quotes around the value 'none'.
If you add them the script should work fine displaying the select boxes when option 2 is selected and remove them from viewing when other options are selected.
Try using them. If it does not satisfy your needs you can always google out. Best of Luck.
[HTML]<?php
if (isset($_POST['submit'])) {
echo '<pre>';
print_r($_POST) ;
echo '</pre>';
}
?><form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Select 1:
<select name="select1" onchange="if (this.value == 2) { document.getEle mentById('other _two').style.di splay='block'; } else { document.getEle mentById('other _two').style.di splay='none'; } ">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<div id="other_two" style="display: none">
Select 2:
<select name="select2">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
<br>
Select 3:
<select name="select3">
<option value="">select </option>
<option value="1">optio n - 1</option>
<option value="2">optio n - 2</option>
<option value="3">optio n - 3</option>
</select>
</div><br>
<input type="submit" name="submit" value="submit">
</form>
[/HTML]
pbmods 5,821
Recognized Expert Expert
To get the selected value of a <select>, you have to use this.options[this.selectedIn dex].value instead of this.value.
fjm 348
Contributor
Hey Pbmods,
Do you mean in my onchange event? Sorry. I am totally lost when it comes to js.
Say, how hard is js to learn anyway? With the advent of ajax, I think it may be an advantage to know.
arggg.. another learning curve to overcome.... :(
Hey Pbmods,
Do you mean in my onchange event? Sorry. I am totally lost when it comes to js.
Say, how hard is js to learn anyway? With the advent of ajax, I think it may be an advantage to know.
arggg.. another learning curve to overcome.... :(
He's talking about line 9 in the code above.
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Crescionini Sascha |
last post by:
Hello NG
If I let appear a DIV over a HTML site with dropdowns, this dropdowns are
still visible.
Is there a way to push them to the back? All other form elements arent
visible.
greets
sascha
|
by: Jeffrey |
last post by:
Hi...
I have several dropdowns located in a datagrid footer. Now say i modify the
selection in dropdown1. I want to refresh the content of the other dropdowns
with the result of a database query.
How can i do it?
Thanks
Jef
|
by: Damon |
last post by:
I am working on a site in which I would like to have two dropdowns that will
allow a user to navigate through the administrative pages of the site. The
first would allow the user to choose the particular site that they would
like to edit. The second would allow the user to select which admin screen
they would like to edit. The second dropdown needs to be populated based on
the selection in the first one. I want to encapsulate these...
|
by: Andy |
last post by:
What I want to do is to populate multiple dropdowns when editing.
Presumably...
a) I should use a DataReader so that I can get each ResultSet for each
dropdown control, and that should cut down round trips to the server.
b) I should populate these dropdowns in the DataGrid_EditCommand?
What I am having problems with is actually referencing the dropdowns on the
template.
e.g. I have a dropdown called drpAccessLevels, but I cannot find this...
|
by: bingomanatee |
last post by:
I have developed what amounts to a fancy shopping cart wizard for a
scientific instrument using VB.NET. We are having some disturbing
phenomena relating to dropdown controls.
On my system and other XP based systems I can repopulate the dropdowns
just fine, to reflect different system configurations. However one of
our engineers is runnign Windows 2000 and he has noticed that the
dropdowns are showing several blank lines. They are...
| |
by: nkparimi |
last post by:
Hi,
Here's what I'm trying: given an html table, to freeze the column
headers and/or left column in IE. I understand that this is possible
thru style sheets in IE, as suggested in the following:
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
http://www.adp-gmbh.ch/web/css/expression.html
|
by: Simon Harvey |
last post by:
Hi everyone,
I keep getting a problem with dropdownlist controls. It sounds really stupid,
but my app is screwed as long as this keeps happening.
It seems to spontaneously happen and then I cant fix it without rebuilding
the whole page from scratch! Not Fun. :-(
So whats happening is I have my dropdowns on the page. The user comes along
and selects an option, but when the user submits the page,. its as if nothing
|
by: Stimp |
last post by:
I have 3 dropdowns: country, county and district.
I'm using ajax to dynamically populate the county and district dropdowns
when country dropdown is changed (and similarly the district dropdown when
county is changed).
This works fine, but unfortunately when I reload the page (via pressing a
button on the page), the county and district lists are emptied (obviously
because they haven't been stored in viewstate, etc)
|
by: bogorman |
last post by:
Am trying to add a "video" to a webpage which is based on a template containing a javascript menu. The site has hundreds of pages all based on this template and the menu works fine
The page can be viewed: www.faith.org.uk/Testindex.html
In IE7 it works fine. The video shows and the dropdowns of the menu work correctly.
In Mozilla Firefox, although the video works the dropdowns do not show.
I have been told that everything works ok in OS...
|
by: sbart |
last post by:
I am programing in asp.net vb using AjaxToolkit cascadingDropDown.
I do not have access to AjaxToolkit cascading dropdown event handlers.
I have a series of dropdowns. The selection from one of the dropdowns (call it ddA) triggers the visibility of some of the other dropdowns.
Problem is that f the user makes one selection from ddA, makes selections from additonal dropdowns, then goes back and changes the selection in ddA, the selections...
|
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: 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...
|
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: 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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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: 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...
| |