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!
