Question

Hi I have 3 Controls on my Razor Form. 1) combobox, 2) DropdownSelect 3) Text Input.
First I select value from Combobox and as a result i add options to DropdownSelect. After i select a value from DropdownSelect, i want to enable or disable the 3rd input box.

I am able to populate 2nd Dropdown select when i select a value in 1st Combobox. But I am not able to enable or disable the 3nd input box based on 2nd Dropdown value change.

Here is sample Code.

<input type="text" dojoType="dijit.form.ComboBox" style="margin-top: 5px;" class="left" store="regionStore" queryExpr="${0}" hasDownArrow="true" 
    searchAttr="text" labelAttr="name" title="Region" id="Plan_RegionName" jsId="Plan_RegionName" name="Plan.RegionName" required="true" placeholder="None" ignoreCase="true" /> 

<select name="Plan.PlanType" id="Plan_PlanType" title="Plan Type" dojoType="dojox.form.DropDownSelect" required="true" maxHeight="125" labelwidth="185px" style="width: 180px">    
    <option value="" selected="selected">-- Select One --</option>    
    <option value="Trial">Trial</option>    
    <option value="PerUser">Per User</option>    
    <option value="PerUnit">Per Unit</option>    
    <option value="Reseller">Reseller</option>    
    <option value="Other">Other</option>    
</select>        
<div dojoType="dijit.form.ValidationTextBox" style="width: 180px; margin-top: 5px;" id="Plan_Name" title="Plan Name" name="Plan.Name" required=&quot;true&quot; 
    missingMessage="This value is required" promptMessage="Enter a value" value="">

<script text/type="javascript"> 
    dojo.addOnLoad(function () {
            dojo.connect(Plan_RegionName, "onChange", Plan_RegionName, function (evt) {
                alert("Combo box Changed!");
            });

            dojo.connect(Plan_PlanType, "onChange", Plan_PlanType, function (evt) {
                alert("Dropdown Changed!");
            });    
        });

</script>

I get the alert message for Combox box change but not for Dropdown change.

Any ideas. Please advice.

thanks,
Vivek

Answer 1

I used the onChange event of Selectbox.
Here is the example.

<select name="@name" id="@id" title="@ViewData.ModelMetadata.GetDisplayName()" onChange="enablePlanname(this.getValue())" dojoType="dijit.form.ComboBox" required="true" maxHeight="125" style="width: 180px; margin-top: 5px;">
@if (String.IsNullOrEmpty(Model))
{
    <option value="" selected="selected">-- Select One --</option>
}
@foreach (CurrencyType bt in Enum.GetValues(typeof(CurrencyType)))
{ 
    bool selected = false;
    if (bt.ToString() == Model)
    {
        selected = true;
    }
    <option value="@bt.ToString()"@(selected ? " selected=\"selected\"" : "")>@bt.GetDisplayName()</option>
}
</select>

<script type="text/javascript">

function enablePlanname(value) {
        var CurrentTextBox = dijit.byId('Region_Currency');
        if (value == "other") {            
            CurrentTextBox.set("disabled", false);
        }
        else {
            CurrentTextBox.set("disabled", true);
        }
    }

</script>

Thanks for all your help.