Getting Value from a ComboBox?

Question

I have had a look at numerous other threads on here that have a similar problem but have been unable to resolve my issue. I'm using the following code for my combobox:

<sq8:ComboBox runat="server" ID="cboAgree"><Items>
<sq8:ComboBoxItem runat="server" Text="Agree"></sq8:ComboBoxItem>
<sq8:ComboBoxItem runat="server" Text="Disagree"></sq8:ComboBoxItem>
</Items>
</sq8:ComboBox>
<sq:BindableControl runat="server" TargetControlID="cboAgree" DataField="Agreement"></sq:BindableControl>

I want to get the value selected (either "Agree" or "Disagree") and use that as a condition to hide/unhide a grid on my form:

   if (value == "Disagree") {
  commentsGrid.style.visibility = "visible";
  }else{
  commentsGrid.style.visibility = "hidden";
  } 

I've tried a number of things but it seems like the problem is to do with the way the form loads and the combobox doesn't have a value at that point. I always get an error that my comboBox "cboAgree" is null.

Could anyone advise?

Answer 1

I believe what you want - based on how you have the code structured in your other post, is to add an event handler to your combo box so that when the selected index is changed, you check the selection.

This scenario is covered in the documentation here but basically what you want to do is:

1. Add the following block inside your existing javascript:

function onSelectedIndexChanged(sender, eventArgs) 
{
    var item = eventArgs.get_item();

    if (value == "Disagree") {
        commentsGrid.style.display = "block";
    } else {
        commentsGrid.style.display = "none";
    } 
}

I would suggest setting the display property to none and block instead of using visibility with hidden and visible. This answer covers the differences and why you should prefer using the display property in this instance.

2. Update your ComboBox to call the new Javascript method:

<sq8:ComboBox runat="server" ID="cboAgree"
onclientselectedindexchanged="onSelectedIndexChanged">