Hello,
I have a combo box (which has various sizes) - retrived from database.
whenever i change the values the relevent price should be displayed, without beign submitted. I know that with ajax its possible, but i do not know ajax. Is there any other way of doing it?
Thanx
retriving and displaying
Moderator: General Moderators
One way you could do it is to give each <option> a label tag (when constructing it with the database return) with the price in it.
Then in a javascript function you can retrieve the value of the label property and display it elsewhere on the screen.
Dont know if the javascript above is correct, but it will be fairly close and should point you in the right direction.
And you'll need to call the function from an onchange event on the select
Code: Select all
<select id="products">
<option label="10.00" value="pickme">Pick Me</option>
</select>
Code: Select all
function GetThePrice(){
TheCombo = document.getElementById('products');
TheLabel = TheCombo.options[TheCombo.selectedIndex].label;
//the use TheLabel to set the value of another html item on your screen
document.getElementById('myotheritem').value = TheLabel
}
And you'll need to call the function from an onchange event on the select
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Only via javascript. You would need to save all the prices in a javascript array and pull the correct price when the user changes the select.
Problem is what happens if the user does not have javascript ? They will need to submit the form (generally I have a within the form for these people. If this button value is in the $_POST/$_GET you know you are not processing the entire form and can get just the price, outputting all the current values as they are.
Ajax it not that difficult. A simple example, easily modified, is available here
Problem is what happens if the user does not have javascript ? They will need to submit the form (generally I have a
Code: Select all
<noscript><input type="submit" name="getprice" value="FetchPrice" /></noscript>Ajax it not that difficult. A simple example, easily modified, is available here
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Well according to the MSDN site in relation to 'label' on an <option> tagCoderGoblin wrote:In my opinion... using labels like "10.00" is not a good idea for a couple of reasons i can think of immediately.
1) Labels should be unique. No guarantee of this.
2) Labels like this break accessibility guidelines.
Says to me that there is no current use for this option. And using it in this way is implementing your own functionality.Sets or retrieves a value that you can use to implement your own label functionality for the object.
It goes on to say "There is no functionality implemented for this property unless defined by the author", it does not say that it should be unique.
http://msdn.microsoft.com/library/defau ... OPTION.asp
If a screen reader uses the label attribute rather than the actual text within the option I can see why accessibility might be an issue, but is this the case
Last edited by mikeq on Wed Jan 31, 2007 8:24 am, edited 1 time in total.
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Fair enough if you trust MSDN...mikeq wrote:Well according to the MSDN site in relation to 'label' on an <option> tag
From the w3.org
By this definition, label is for the options group/hierarchical menus. I know this is not supported by many browsers yet but I prefer to keep as much as possible to the w3-org guidelines. But we are taking this off topic by opinions...Start tag: required, End tag: requiredCode: Select all
<!ELEMENT OPTGROUP - - (OPTION)+ -- option group --> <!ATTLIST OPTGROUP %attrs; -- %coreattrs, %i18n, %events -- disabled (disabled) #IMPLIED -- unavailable in this context -- label %Text; #REQUIRED -- for use in hierarchical menus -- >
OPTGROUP Attribute definitions
label = text [CS] This attribute specifies the label for the option group.
...Code: Select all
<SELECT name="ComOS"> <OPTION selected label="none" value="none">None</OPTION> <OPTGROUP label="PortMaster 3"> <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION> <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION> </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION> <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION> </OPTGROUP> <OPTGROUP label="IRX"> <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION> <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION> </OPTGROUP> </SELECT>
The solution is as we have both said... Javascript, although I would recommend a "<noscript>submit" for those people who do not have javascript.
If you have multiple "features" where Ajax would come in handy I recommend you look into it to see if how easily it would fit.