Help modifying select menu dynamically!

T

tuxedo

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!
 
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.
Click to expand...

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') ...???)
Click to expand...

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.
Click to expand...

<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 !
 
T

tuxedo

ASM wrote:

[...]
I tried nothing of this code nor tested it
Click to expand...

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!
 
A

ASM

tuxedo a écrit :
ASM wrote:

[...]
I tried nothing of this code nor tested it
Click to expand...

I now tried it but could unfortunately not make this work.
Click to expand...

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.text = where.options[a].text;
where.options.value = where.options[a].value;
}
var o = new Option('Please select order','');
where.options[0] = o;
}
 
T

tuxedo

ASM wrote:

[...]
unshift(x y z) works fine with an Array
options are probably not seen as an array ?
Click to expand...

Yes I read now that options are objects, contained by the select object.
this here works, but there is certainly something more elegant :
Click to expand...

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!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Multi select options in a menu 1
Add Image and label dynamically inside the dropdown 2
How to display input options only after selecting an option from the 'select class' tag JS? 6
I dont get this. Please help me!! 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Survey details won't go through using php, ajax, Mysql 0
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
Working on mobile css menu with plenty of frustration! 2

Members online

Total: 33 (members: 2, guests: 31)
Robots: 241

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,159
Latest member
SweetCalmCBDGummies

Latest Threads

Top