473,802 Members | 1,978 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Help modifying select menu dynamically!

I have a fixed html structure, where only one form and a simple select menu
will exist on an html page, as follows:

<form action="order" method="POST">
<select name="dinner">

<option value="1">Pizza </option>
<option value="2">Hot Vindaloo</option>
<option value="3">Fish-n-Chips</option>
<option value="4">Curry wurst</option>

</select>
<input type="submit" value="Place order">
</form>

I'd like the initial option display not say "Pizza" but instead
display "Please select your order", without changing the above html code,
in other words, generated by Javascript.

The way I thought this could be done is:

1) When the html document loads, body onload, add an option to the list on
the top of the options, so it will have five options instead of four (but
without knowing the number in advance). Exactly how can I do this in
Javascript?
(Something like: document.forms[1] = new Option('text',' value') ...???)

2) As I make the first onChange toggle action, I would like to REMOVE the
initially created "Please select ..." option, so that options only contain
valid food choices and is the length of the original html structure again.

3) In case the user did not select anything, I would like to halt the
submission by the onSubmit() event handler, and pop up an alert('Please
select order') instead.

I'm not quite sure how to code the above however, or if it will work on most
current browsers? An initial search indicates that IE or/and Opera have
problems in modifying drop menus dynamically, but perhaps this information
is outdated and now relates mostly to extinct browsers?

I would greatly appreciate any comments, tips and especially code bits!
Dec 5 '06 #1
6 2199
ASM
tuxedo a écrit :
I have a fixed html structure, where only one form and a simple select menu
will exist on an html page, as follows:

<form action="order" method="POST">
<select name="dinner">

<option value="1">Pizza </option>
<option value="2">Hot Vindaloo</option>
<option value="3">Fish-n-Chips</option>
<option value="4">Curry wurst</option>

</select>
<input type="submit" value="Place order">
</form>

I'd like the initial option display not say "Pizza" but instead
display "Please select your order", without changing the above html code,
in other words, generated by Javascript.
var D = document.forms['myForm'].dinner;
D.options[0].text = "Please select your order";
The way I thought this could be done is:

1) When the html document loads, body onload, add an option to the list on
the top of the options, so it will have five options instead of four (but
without knowing the number in advance). Exactly how can I do this in
Javascript?
(Something like: document.forms[1] = new Option('text',' value') ...???)
function addFirst(where, newText, newVal) {
var o = new Option(newText, newVal);
where.options = where.options.u nshift(o);
}

<body onload="addFirs t(
document.forms['myForm'].dinner,
'Please select your order',
'');"
2) As I make the first onChange toggle action, I would like to REMOVE the
initially created "Please select ..." option, so that options only contain
valid food choices and is the length of the original html structure again.
document.forms['myForm'].dinner.options .shift();
3) In case the user did not select anything, I would like to halt the
submission by the onSubmit() event handler, and pop up an alert('Please
select order') instead.
<form blah
onsubmit="var D = document.forms['myForm'].dinner.options ;
var ok = D[0].text!='Please select your order';
if(!ok) alert('go to choice a pizza !');
return ok" >
Don't forget to give 'myForm' as name for your form !
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #2
ASM wrote:

[...]
Don't forget to give 'myForm' as name for your form !
Merci - code looks good! I will test.
Dec 5 '06 #3
ASM
tuxedo a écrit :
ASM wrote:

[...]

Merci - code looks good! I will test.
I tried nothing of this code nor tested it

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 5 '06 #4
ASM wrote:

[...]
I tried nothing of this code nor tested it
I now tried it but could unfortunately not make this work.

Firstly, I've tried simply to add an option on top of the select menu with
the "Please select your order" text, using the addFirst() function, as in
my below example, but without passing the parameters within the onload
function parameters, as follows:
<script ... >

function addFirst(){
var where = document.forms['myForm'].dinner;
var o = new Option('Please select order','');
where = where.options.u nshift(o);
}

</script>
<body onload="addFirs t()">

<form name="myForm" action="order" method="POST">

<select name="dinner">
<option value="1">Pizza </option>
<option value="2">Hot Vindaloo</option>
<option value="3">Fish-n-Chips</option>
<option value="4">Curry wurst</option>
</select>

<input type="submit" value="Place order">

</form>
According to the earlier post, should teh above not add an option on top of
the select menu containing the "Please select order" text?

The Javascript error when running it is "where.unsh ift is not a function",
which I'm not sure what it means....

How exactly should I add an option on top of the select menu containing the
new text string?

Thanks for any tips!

Dec 6 '06 #5
ASM
tuxedo a écrit :
ASM wrote:

[...]
>I tried nothing of this code nor tested it

I now tried it but could unfortunately not make this work.
unshift(x y z) works fine with an Array
options are probably not seen as an array ?

this here works, but there is certainly something more elegant :

function addFirst(){
var where = document.forms['myForm'].dinner;
where.length++;
for(var i=where.length-1; i>0; i--)
{
var a = -1+i;
where.options[i].text = where.options[a].text;
where.options[i].value = where.options[a].value;
}
var o = new Option('Please select order','');
where.options[0] = o;
}

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 6 '06 #6
ASM wrote:

[...]
unshift(x y z) works fine with an Array
options are probably not seen as an array ?
Yes I read now that options are objects, contained by the select object.
this here works, but there is certainly something more elegant :
It certainly works and who cares what it looks like!? Adding the option was
obviously the hard part. The rest should be more straightforward .

Many thanks!
Dec 7 '06 #7

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

Similar topics

4
2850
by: Nanos | last post by:
For the form I need to create drop down select with say five different options. There also should be possibility to enter own option if one is not listed. How can I do it.? Thank you in advance for any hint, emanuel
0
1244
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.
20
2691
by: titi | last post by:
Question The road and traffic authority for a small country currently uses a system to store information about all 'currently' licensed drivers. A licensed driver has the following info stored about them in a record; 1. Given name(s) of the license holder.(not more than 128 char (may have spaces)). 2. Surname of the license holder.(Not more then 128 same like above).
3
1638
by: NewmanBT | last post by:
As you can see from the code below, several textboxes will be dynamically created and each will be tied to an org. The ChangeComment function should allow for an update to the database whenever the value of the associated textbox changes. However, I'm having trouble associating the textbox to the org. strOrg is a global variable which changes throughout the runtime. How do I capture its value at each stage a textbox is created so that...
2
7245
by: devendra pardeshi | last post by:
hi friends/seniors i am stuck on one problem in VB 6.0 and need solution. see if u can help me. first i describe the problem. Can u imagin the WinZip scenario. we right click on some file and select in context menu add to zip.Now if winzip is not runnig allready new instance of winzip application begins and
13
4280
by: Andrew Bell | last post by:
I'm doing a uni course in the UK and one of my semesters is about programming. This is just going to be compilied and executed with no menu just using command promt (javac classfile.class) I am not that good at programming but what I need to know is in java how would i do this.................. menu appears, user selects menu option (1,2,3,4,5,6) a new menu appears after selecting option 1 asking the user to select another option...
4
4157
by: Bob Homes | last post by:
In VB6, I used a system, which I loved, whereby I assigned a "helpId" to each menu item; that way, you could rest the cursor on the item (without actually running it) and then press F1 to get context help with that particular command. In VB6 this was easy, since each menu item had a "helpId" property. That doesn't seem to be the case in VB.NET. Am I wrong about that, or (alternatively) is there some other way to accomplish this? --
4
1977
windows_mss
by: windows_mss | last post by:
When I Select Source & Destination Dynamically, Path Getting Scatter Across The Map... hi, i can able to get the Correct Route and Path for the corresponding Source and destination, like this, map.GetRoute('Redmond, Washington, United States','seattle, Washington, United States',VEDistanceUnit.KiloMeter,VERouteType.Shortest);
3
3018
by: =?Utf-8?B?ZWFndWlsYXI=?= | last post by:
Hi, I am trying to dynamically generate a menu, based on entries on a text or xml file. The text file contains the "tree" after which the menu will need to be created. Something like the following: Level 1 -- Level 2 -- Level 2 Level 1
0
9562
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
10538
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
10063
tracyyun
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...
0
9115
agi2029
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...
1
7598
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
5494
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...
1
4270
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
2
3792
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2966
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.