Combo Box As Form Element

Hi,

I am using the AW combo box as a form element instead of a <select>. How do I get it to send in the request the option selected in the same way the <select> element would do it?

See code sample below. Used simply, it sends nothing. If I use setAttribute("name", "elemName") then the request contains elemName, but the value sent is the display string, not the option value. (Meaning it'll send the myFeeVals value, not the myFeesKeys value)

Is there a method, or do I have to get tricky and do something like push the key to some separate hidden element?

<script>
var feeCombo = new AW.UI.Combo();
feeCombo.setId("feeCombo");
feeCombo.setItemCount(myFeesVals.length);
feeCombo.setItemText(myFeesVals);
feeCombo.setItemValue(myFeesKeys);
feeCombo.defineItemProperty("color", myFeesClrs); 
feeCombo.getItemTemplate().setStyle("color", function(){
    if (this.getItemProperty("color") == "noshow")
        return "red";
    else
        return "black";
})
// make combo more <select>-like
feeCombo.getContent("box/text").setAttribute("readonly", true);
feeCombo.getContent("box/text").setAttribute("name", "LocFeeCode");
feeCombo.onControlEditStarted = function() {
    this.getContent("box/text").element().contentEditable = false;
}
document.write(feeCombo);
</script>

Anonymous:

Thanks for the link, but that doesn't quite help. I already know how to get a selected item via scripting, or run code from events raised by the combo.

What I'm wondering if there is a way to send the value selected without having to write script? The method setAttribute("name") almost does it right, but doesn't use the values set by setItemValue() for some reason.

IOW, if one wants to use AW.UI.Combo as a typical form control, one shouldn't have to script anything to get it to behave like a <select> box. If there is no way to do this declaritively, this is a design problem in this library that poses as a replacement for HTML form elements.

Currently AW controls cannot be used as form elements (i.e. its values will not be automatically included into the form action request). You have to either copy the value into the hidden input element or use AW.HTTP.Request class for script-based postback.

I'll add that what I am currently doing is:

<input type=hidden name="LocFeeCode" id="LocFeeCode">
<script>
:
//feeCombo.getContent("box/text").setAttribute("name", "LocFeeCode");
feeCombo.onItemSelectedChanged = function(value, index){
   if ( value ) {
      document.getElementById("LocFeeCode").value = myFeesKeys[index];
   }
}
:
</script>

I shouldn't have to do this. It's not a big deal, but I shouldn't have to do this. Either I'm missing the "better way" or there is no declarative way to do this.

Sorry Alex, you posted just as I did. Thanks for the reply.

Paul,

I agree, this is a design problem and the reason is that I never thought about this library as a replacement for html form elements but rather some sort of AJAX UI toolkit. However it seems that many people also find it useful for the traditional request-response web apps, so I am planning to make it compatible with standard html forms.

Basically I am planning to add hidden input element to all AW controls and copy the current control 'value' there.

Alex,

They are great as replacements! For example, two common problems get easily solved by using the AW.UI.Combo as a stand-in for the traditional <select>:

- z-order problems
- styling/formating of "drop-down" independently of the "box" itself.

Also, it's relatively easy to build in functionality like auto-complete via AJAX, etc...

Your solution is right. It's what we as users would have to do anyways...