Solved

Radio button change event triggering msg on wrong condition

Posted on 2014-10-04
8
252 Views
Last Modified: 2014-10-06
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");
      // NOTIF MSG 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

       });
       }
     });
  });

Open in new window


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;" />

Open in new window

0
Comment
Question by:peter-cooper
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40361167
The if conditions are only evaluated when the radio buttons change. The onBlur and onFocus event handlers will fire whenever the focus changes on the text boxes, independent of the onChange of the radio buttons.  If the text box has focus and you click on a different radio button, the text box onBlur event fires because you have removed focus, followed by the onChange event.

If you can explain what you want to happen maybe we can straighten out the logic.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40361220
Agree with Tom on this - the blur event handler seems a bit lost and out of place in the middle of the click event handler - not clear what it is you are trying to achieve.

From your code it looks like you can completely remove the .blur event handlers from the code and you should have pretty much what you want.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40361256
Also having a seperate event inside another event will cause that nested event to be added again and again each time you change the radio button i.e. you would end up with multiple blur events firing.
0
 

Author Comment

by:peter-cooper
ID: 40361497
@Tom
basically, when a user clicks the 'New Intake With Files' button, make box_add readonly after users have finished typing. Then enable '#bfile_add' for input. If the user clicks or tries to type then the notif msg is fired.  

If a user clicks 'New Inatke' then do the reverse but with no msg. Hope that is clearer. Thanks
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 total points
ID: 40361563
How about this (if I'm understanding you correctly):
$(function() { 
    var radios = $('input:radio[name="activity"]'), radioVal;
	$(radios).each(function(){
		if($(this).prop('checked')){
			radioVal = $(this).val(); //initialized radio			
		}
	});
	
    $(radios).change(function(){ 
	    radioVal = $(this).val();
	});
	
	$('#box_add').on('blur',function(){
		if(radioVal == 'New Intake with Files') {
			$(this).attr('readonly','readonly'); //or use disabled
			$('#bfile_add').removeAttr('disabled'); //or use readonly
		}
	});
	
	$('#box_add').on('focus',function(){
	    if(radioVal == 'New Intake'){
			$(this).removeAttr('readonly'); //or use disabled attribute
            $('#bfile_add').attr('disabled', 'disabled'); //or use readonly
		}else{
			if($('#box_add').prop('disabled') || $('#box_add').prop('readonly')) { 
				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,
				 });
			}
		}
	});   
});

Open in new window

0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 40361847
@Tom, if you only want to handle checked radios then

var radios = $('input:radio[name="activity"]:checked');

would do it.

If there was only one then this would also be unnecessary

radios.each(function(){
  radioVal = $(this).val(); //initialized radio                  
});

it will as it stands overwrite radioval each time a checked radio is found - if there is only one radioset, then

var radioval =$('input:radio[name="activity"]:checked').val() || "None selected";

would suffice
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40362047
Good advice @Michel. I guess that's what experience will do for you. I'll keep my day job for a while longer.
0
 

Author Closing Comment

by:peter-cooper
ID: 40363296
Thank you very much.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Timerpicker in javascript 4 34
How can I   ajax html table  rows? 20 60
How to drill down using class name and find the text? 25 31
Split in Javascript 5 30
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now