CODEWITHSUNDEEP
javascriptjqueryhtmlselectif-statement
Tony Prasad
Tony Prasad

Reputation: 79

Disabling form elements based on condition of dropdown list

I have a html code below that generates 2 drop down boxes. The setup environment is Netbeans 7.3 with Chrome Integration. Jquery 2.0.3 is added to the path in Netbeans.

<div class="patientHealthInsurance">
    <label class="fonttype">Health Insurance:</label><br>
    <label class="fonttype">Card:</label>
            <select name="card" id="card">
                <option value="Y">Y</option>
                <option value="N">N</option>
            </select>
    <label class="fonttype">Card Type:</label>
            <select name="cardtype" id="cardtype">
                <option value="MBF">MBF</option>
                <option value="NIB">NIB</option>
                <option value="HCF">HCF</option>
            </select>
    <label class="fonttype">Card Number:</label>
                <input type="text" name="insurancecardnumber"id="insurancecardnumber"/>
    <label class="fonttype">Card Expiry Date:</label>
                <input type="date" name="cardexpiry" id="cardexpiry"/>
</div>

<div class="patientPension">
    <label class="fonttype">Pension:</label><br>
    <label class="fonttype">Card:</label>
            <select name="pensioncard" id="pensioncard">
                <option value="Y">Y</option>
                <option value="N">N</option>
            </select>
    <label class="fonttype">Pension Card Number:</label>
                <input type="text" name="pensioncardnumber" id="pensioncardnumber"/>
    <label class="fonttype">Card Expiry Date:</label>
                <input type="date" name="pensioncardexpiry" id="pensioncardexpiry"/>
 </div>

I also have a jquery/javascript that puts a little dynamics to the html above. If I select a value of "N" in the card dropdown the cardtype, cardexpiry and insurancecardnumber elements need to disable. If I select a value of "Y" they should enable.

If I also select "N" from the pensioncard dropdown, the effect should be similar as above only in this case the pensioncard and pensioncardexpiry elements need to disable. If I select "Y" then they should enable.

My Jquery/Javascript follows...

$(document).ready(function(){
    $("select").change(function(){
    if ($("#card").val("N")){
        $("#cardtype").attr("disabled",true);
        $("#insurancecardnumber").attr("disabled",true);
        $("#cardexpiry").attr("disabled",true);
}
    else if($("#card").val("Y")){
        $("#cardtype").attr("disabled",false);
        $("#insurancecardnumber").attr("disabled",false);
        $("#cardexpiry").attr("disabled",false);
}
    if ($("#pensioncard").val("N")){
        $("#pensioncardnumber").attr("disabled",true);
        $("#pensioncardexpiry").attr("disabled",true);         
}
    else if($("pensioncard").val("Y")){
        $("pensioncardnumber").attr("disabled",false);
        $("pensioncardexpiry").attr("disabled",false);
}
});
});

The result is quite unexpected. If I select "N" in the card dropdown this disables the cardtype, insurancecardnumber, cardexpiry elements as expected however this also disables the pensioncardnumber and pensioncardexpiry elements as well. It also changes the value from "Y" to "N" of the pensioncard dropdown. If I change the value to "N" in the pensioncard dropdown this disables the pensioncardnumber and pensioncardexpiry elements as expected but also disables the cardtype, cardexpiry and insurancecardnumber elements. I cannot get this logic to playout properly.

Another ambiguity is that if I try to manually change the value of both dropdowns to "Y" in chrome the value always defaults to "N".

In summary it appears that selecting "N" in either dropdown disables all the 5 elements in question and changing the "N" to "Y" manually cannot happen as it just defaults to "N".

Any ideas?

Upvotes: 1

Views: 2775

Answers (2)

eggshot
eggshot

Reputation: 190

Here's a native HTML and JavaScript solution:

HTML: Add a distinct class to the input fields you want to toggle disabled attribute. In this example: 'pensionClass'. 

<input type="text" name="pensioncardnumber" id="pensioncardnumber" class="pensionClass"/>
<input type="date" name="pensioncardexpiry" id="pensioncardexpiry" class="pensionClass"/>

Add a function on onchange:

<select name="pensioncard" id="pensioncard" onchange="toggleAttribute('pensionClass',this.selectedIndex)">

JAVASCRIPT:

toggleAttribute = function(className,index){
      var eLs = [].slice.call(document.getElementsByClassName(className),0);
      for(var i=0; i<eLs.length; i++){
         eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes'
      }
}

Upvotes: 1

sakhunzai
sakhunzai

Reputation: 14470

You need to separate the on change action for both dropdowns e. g

 $("select[name='card']").change(function(){
   ...
 })

$("select[name='pensioncard']").change(function(){
   ...
 })

check the jsfiddle 

$("select[name='card']").change(function(){
     var disableIt=$(this).val()=='N' ? true : false;
      $("#cardtype").attr("disabled",disableIt);
      $("#insurancecardnumber").attr("disabled",disableIt);
      $("#cardexpiry").attr("disabled",disableIt);     
 }); 

 $("select[name='pensioncard']").change(function(){
     var disableIt=$(this).val()=='N' ? true : false;
      $("#pensioncardnumber").attr("disabled",disableIt);
        $("#pensioncardexpiry").attr("disabled",disableIt);          
 });

On server type of bug you have is if($("#pensioncard").val("N")) will always set the value to 'N' and will be true. if you want to compare value read it by $("#pensioncard").val()

Upvotes: 1

Related Questions