Page 1 of 1

retriving and displaying

Posted: Wed Jan 31, 2007 7:06 am
by kpraman
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

Posted: Wed Jan 31, 2007 7:44 am
by mikeq
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.

Code: Select all

<select id="products">
<option label="10.00" value="pickme">Pick Me</option>
</select>
Then in a javascript function you can retrieve the value of the label property and display it elsewhere on the screen.

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
}
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

Posted: Wed Jan 31, 2007 7:50 am
by CoderGoblin
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

Code: Select all

<noscript><input type="submit" name="getprice" value="FetchPrice" /></noscript>
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

Posted: Wed Jan 31, 2007 7:53 am
by CoderGoblin
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 like this break accessibility guidelines.
2) Labels within <option> should only be used when using <optgroup>

Posted: Wed Jan 31, 2007 8:03 am
by mikeq
CoderGoblin 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.
Well according to the MSDN site in relation to 'label' on an <option> tag
Sets or retrieves a value that you can use to implement your own label functionality for the object.
Says to me that there is no current use for this option. And using it in this way is implementing your own functionality.

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

Posted: Wed Jan 31, 2007 8:17 am
by feyd
This appears to have little-to-nothing to do with PHP.. Moved to Client Side.

Posted: Wed Jan 31, 2007 8:55 am
by CoderGoblin
mikeq wrote:Well according to the MSDN site in relation to 'label' on an <option> tag
Fair enough if you trust MSDN... :wink: Personally I prefer a site which is not biased to their own browser.

From the w3.org

Code: 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 --
  >
Start tag: required, End tag: required

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>
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...

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.