Getting the Combo Value

This tutorial applies for Classic ASP, JSP, and PHP but not for ASP.NET. ASP.NET developers should see the ASP.NET tutorials instead.

We could be referring to four different things when we say "How do I get the Combo value?"

What is currently in the text box?

(or)
What is the selected value from the list?

(or)
What value was submitted in the form?

(or)
What are the values of the top record?

What is currently in the text box?

Here is an alert pop up that will show the current text box value. Assuming your Combo ID is "myCombo":

alert($("myCombo").jsObject.GetTextValue());

What is the selected value from the list?

When the user selects something from the list, a JavaScript Array is populated with all the values from that row of the XML. Assuming your Combo ID is "myCombo":

This will output the whole concatenated array:

alert($("myCombo").jsObject.GetSelectedRowValues());

This will output the 1st and 2nd columns of that array

alert($("myCombo").jsObject.GetSelectedRowValues()[0]);
alert($("myCombo").jsObject.GetSelectedRowValues()[1]);

What Value was Submitted with the Form?

When the user submits the combo with a form, several form fields are created which can be read by the server. Assuming your Combo ID was "myCombo", and there were two columns of data in the list XML, the available form fields will include:

"myCombo" - The actual text in the textbox.
"myComboSelectedValue0" - The first data column of the selected row.
"myComboSelectedValue1" - The second data column of the selected row.

What are the Values of the Top Record?

You may want to grab the values of the top record either when a record is selected, or as the user types. This is possible with the use of the GetFieldFromActiveRow( ColumnName ) method.

For example, let"s set up our combo to do something when a record is chosen:

<ntb:Combo id="myCombo" Mode="unbound" onSelectEvent="PopulateForm()">
<ntb:ComboTextBox DataFieldIndex=0 ></ntb:ComboTextBox>
<ntb:ComboList Width="250px" Height="200px">
<ntb:ComboColumnDefinition Width="100px" DataFieldIndex=0></ntb:ComboColumnDefinition>
<ntb:ComboColumnDefinition Width="100px" DataFieldIndex=1></ntb:ComboColumnDefinition>
</ntb:ComboList>
   <ntb:ComboValues fields="City|Population">
     <ntb:ComboValue a="Vancouver" b="3,000,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Toronto" b="4,500,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Ottawa" b="1,000,000" ></ntb:ComboValue>
     <ntb:ComboValue a="California" b="4,500,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Halifax" b="900,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Calgary" b="1,500,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Red Deer" b="100,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Prince George" b="200,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Portland" b="1,500,000" ></ntb:ComboValue>
     <ntb:ComboValue a="Atlanta" b="4,500,000" ></ntb:ComboValue>
  </ntb:ComboValues>
</ntb:Combo>

<br><br>

<form name="testform">
City Name: <input type="text" size="50" name="CityName"><br>
Population: <input type="text" size="50" name="Population"><br>
</form>

In this unbound combo we have wired our onSelectEvent to a function called PopulateForm(). We have also created a form with two fields.

Next we write PopulateForm() function:

function PopulateForm()
{
var MyComboObject = $("myCombo").jsObject;

var MyCityNameField = window.document.getElementById("CityName");
var MyPopulationField = window.document.getElementById("Population");

MyCityNameField.value = MyComboObject.GetFieldFromActiveRow("City");
MyPopulationField.value = MyComboObject.GetFieldFromActiveRow("Population");
}

Now, when the user selects a record, the values of the two columns are passed into the form.

Working in Unbound Mode

View Printable Version

Nitobi Product Knowledgebase