Thank you AussieJohn, but the problem is, I cannot use the data attribute in the Option tag, cause the Option tag will be automatically created by an other script, I cannot manually include the data attribute in each Option tag.
You will need to get the amount from the text between the Option tags, i.e. <option value=“IceCream02”>Solero Exotic (+$1.85)</option>
Also, the plus sign has to be included, i.e. (+$1.85), not ($1.85).
Anyone know how to do this without adding more attributes to the Option tag?
Here is the JS with some highlighting and additional comments:
function onSubmit() {
var idx, selects, price, selectedIdx;
// get all the selects we want to get the price from
selects = document.getElementById("theSelects").getElementsByTagName("select");
for (idx in selects) {
selectedIdx = selects[idx].selectedIndex
// we're skipping if the first el is selected because it's
// the "please select" item. As an additional, more pragmatic
// implementation we'll also check that the value is empty.
if (selectedIdx > 0 && selects[idx][selectedIdx].value != "") {
// get the price data attribute
price = selects[idx][selectedIdx].getAttribute("data-price");
// do something with the price.
alert(price);
}
}
}
HTML will likely end up somewhat a “living standard”, which would mean the language (in theory) would always keep evolving.
The challenge is of course for browser vendors to make sure that their browser is backwards compatible with any changes in the spec.
While there are certain elements of HTML5 that probably aren’t quite ready yet, there are many things that are. And as the spec evolves and matures, and browsers continue to update, it will definitely be one of the better ways to build websites IMO.
Having said all that, nobody has to start using HTML5, XHTML is still a valid standard, as is HTML4. As with most things web dev related, there are advantages and disadvantages to using particular technologies. It’s up to us (developers / IT folks) to weigh those up and make a decision about which technologies we will use to build our web stuff. (Web stuff is a technical term, clearly;))
But what if the final release of html5 (which is still a few years away) has things in it that will cause pages with “current” html5 code to “malfunction”?
If you want validated html and it can be done in html4 or xhtml1.0, why risk using html5 before it is finished?
But you did mention it. (: After much internal debate, I’ve decided just to go for that doctype all the time now. Nice and neat, and seems to do the job.
XHTML specifications allow for custom attributes however using them as “data-*” will result in validation errors. That doesn’t stop most people from using them however, functionally they will work fine.
as long as the op is aware that html5 will remain in development for a few years yet and that the final release of html5 could be different to what it is today. Also support for html5 currently varies greatly between the major browsers.
Another (perhaps easier) option would be to use HTML5 Data Attributes to add the price to the option element.
e.g.
<select name="whatever">
<option value="some value" data-price="1.95">Some text here ($1.95)</option>
<option value="some other value" data-price="3.52">Some other text here ($3.52)</option>
</select>
You could then get the price quite easily from the data-price attribute.
1- use a regular expression to extract just the numerical price.
2- use substring() to extract the numerical price
3- If you need the current value of each option as well, you can add the numerical price to the value as well and separate each option’s values with a unique character(s) like ‘#’ and then use spilt() to separate out the values for the selected option.
