By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 967 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Help modifying select menu dynamically!

P: n/a
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">Currywurst</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
Share this Question
Share on Google+
6 Replies


P: n/a
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">Currywurst</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.unshift(o);
}

<body onload="addFirst(
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

P: n/a
ASM wrote:

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

P: n/a
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

P: n/a
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.unshift(o);
}

</script>
<body onload="addFirst()">

<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">Currywurst</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.unshift 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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.