CODEWITHSUNDEEP
javascriptjquery
user1532468
user1532468

Reputation: 1753

Radio button change event triggering msg on wrong condition

I am using a simple radio button change event so when a button is clicked, it should evaluate one of the conditions. However, what is happening, is that 'notif' is still firing the msg even if the condition is 'New Intake'. The msg should only be triggered if the condition == 'New Intake with Files'.

It seems to be totally ignoring this condition altogether. I have been struggling with this for some time now and would be grateful if someone could point out my error. Many thanks.

$(function() { 

    $('input:radio[name="activity"]').change(function(){
    if($(this).val() == 'New Intake with Files'){

       //alert("new intake with files");

         $('#box_add').on('blur',function(){
         $(this).attr('readonly','readonly'); //or use disabled
         $('#bfile_add').removeAttr('disabled'); //or use readonly

         // SHOULD ONLY DISPLAY IF THIS CONDITION IS MET
         notif({
                msg: "Please Only input 1 box per file submission. Each box will hold approx 20 files. Thank you.",
                type: "boxdstrError",
                position: "center",
                width: 490,
                height: 75,
                multiline: true,
                timeout: 6000,
                opacity: 0.8,
                fade: 10,
           });
         });
        } else 
    if($(this).val() == 'New Intake'){

       //alert("new intake");
       // SHOULD NOT DISPLAY IF THIS CONDITION IS MET
        $('#box_add').on('focus',function(){
        $(this).removeAttr('readonly'); //or use disabled attribute
        $('#bfile_add').attr('disabled', 'disabled'); //or use readonly

       });
       }
     });
  });

HTML

<div class="fieldset">
    <h1><span>Activity Type</span></h1>
      <p>
        <input id="activity" name="activity" class="css-checkbox" type="radio" value="New Intake" checked="checked" />
        <label for="activity" class="css-label"></label>
        <a href="javascript:void(0)" class="tooltip" title="Choose this option to put new boxes into storage.">New Intake</a>
        <br />

        <input id="activity1a" name="activity" type="radio" class="css-checkbox" value="New Intake with Files" />
        <label for="activity1a" class="css-label"></label>
        <a href="javascript:void(0)" class="tooltip" title="Choose this option to put new files into storage together with your box.">New Intake With Files</a>
      </p>
</div>

<input class="boxadd" id="box_add" name="box_add[]" type="text" required="required" style="width:250px; height:30px;"  />
<input name="bfile_add[]" id="bfile_add" type="text" disabled style="width:250px; height:30px;" />

Upvotes: 0

Views: 91

Answers (1)

dreyescat
dreyescat

Reputation: 13808

Once you click the 'New Intake with Files' radio button then your notif function will be called every time the boxadd input loses focus. So, if I'm not wrong, what you want is to turn off the blur handler when the 'New Intake' radio is selected:

if($(this).val() == 'New Intake') {
    $('#box_add').off('blur')
    ...
}

Upvotes: 1

Related Questions