?
Solved

Make input readonly when it loses focus

Posted on 2014-10-03
12
Medium Priority
?
219 Views
Last Modified: 2014-10-25
I have 2 radio buttons. '#activity' & 'activity1a'. activity is checked as default on page load. When a user selects the '#activity1a' button, I would like to make an input (#box_add) readonly. When a user selects '#activity', remove the readonly to make it available for input. I have tried various ways and the latest attempt is as the posted code.

What is happening, is that when '#activity1a' is clicked, this does make the input readonly when I lose focus. But, if I click the '#activity' button, it still is readonly and displays the notif msg. It is like it is bypassing the '#activity' code for msome reason.

I would be grateful if someone could point out my nOOb error. Many thanks

jquery code

// new intake with files selected
// THIS CODE WORKS AS DESIRED

$(function() { 
$("#activity1a").click(function () {
			
	$('#box_add').focusout(function(){
	$('#box_add').prop('readonly', true);
	$('#box_add').css({'background-color': '#fafafa'});
		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,
		});
	});
			$("#bfile_add").prop('disabled', false);
        
  });
  });

// ordinary box intake
//THIS CODE DOES NOTHING. SEEMS TO BE STILL USING THE CODE ABOVE. THIS CODE SHOULD REVERSE THE CODE ABOVE

$(function() { 
$("#activity").click(function () {
		
		$("#box_add").prop('readonly', false);
		$("#box_add").css({'background-color': '#ffffff'});
		
		$("#bfile_add").prop('disabled', true);
        
  });
  });

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

Open in new window

0
Comment
Question by:peter-cooper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
12 Comments
 
LVL 13

Expert Comment

by:F Igor
ID: 40359086
Attributes "disabled" and "readonly" are "valueless" attributes, so you need to remove the readonly or disabled attribute to get it working


 
To remove the readonly or disabled attribute you should use

		$("#box_add").removeAttr('readonly');

Open in new window


or

		$("#box_add").prop('readonly',null);

Open in new window


The same for "disabled" property
0
 

Author Comment

by:peter-cooper
ID: 40359095
@fraigor
Thx for reply. Made the changes, but unfortunately, still the same issue.  Cannot see why is is still readonly and firing the msg from the first code block. Thanks
0
 

Author Comment

by:peter-cooper
ID: 40359104
Thought I would try a change event instead, but still the same freaking issue. Why is this happening? The alerts are firing correctly, so the correct button is being recognised.

$(function() { 

$('input:radio[name="activity"]').change(function(){
        if($(this).val() == 'New Intake with Files'){
	
       alert("new intake with files");
	   
	   $('#box_add').focusout(function(){
	   $("#box_add").prop('readonly',null);
	   $("#box_add").css({'background-color': '#fafafa'});
	   $("#bfile_add").prop('disabled',null);
		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");
	   
           $("#box_add").prop('readonly',null);
	   $("#box_add").css({'background-color': '#ffffff'});
	   $("#bfile_add").prop('disabled',null);
		
	   }
     });
  });

Open in new window

0
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
LVL 82

Expert Comment

by:leakim971
ID: 40359166
what about : http://jsfiddle.net/shd7qaaq/

$(function() { 
    $(".css-checkbox").change(function () {
        var myBoolean = $(this).is("#activity");
//        $('#box_add').focusout(function(){
            $('#box_add').prop('readonly', !myBoolean);
            $('#box_add').css({'background-color': (myBoolean?'#ffffff':'#fafafa') });
            if(!myBoolean) {
                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,
                });
            }
//        });
        $("#bfile_add").prop('disabled', myBoolean);
    });
});

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 40359178
@leakim
made a mistake on line 31 of the amended code. Should read:

$("#bfile_add").prop('disabled',true);

Open in new window


Will this make a difference to your code. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40359184
no, myBoolean is true or false depending whihc radio has been clicked
0
 

Author Comment

by:peter-cooper
ID: 40359193
@leakim
Unfortunately, it isn't working for me. When I click the 'new intake with files' button, it immediately fire the msg and makes the input readonly before it gains focus. I used your code exactly as is. Thanks
0
 

Author Comment

by:peter-cooper
ID: 40359194
@leakim
Your fiddle does the same. Makes it readonly before any data can be entered. Need to make it readonly after a user has finished typing or left the input. Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40359248
if the user is typing and click on the radio button, the textbox left focus which mean the user finished typing, right ?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40359257
wht about : http://jsfiddle.net/shd7qaaq/1/
// new intake with files selected
// THIS CODE WORKS AS DESIRED

$(function() { 
    $(".css-checkbox").change(function () {
        var myBoolean = $(this).is("#activity");
        if($.trim($("#box_add").val())!="") {
            $('#box_add').prop('readonly', !myBoolean);
        }
        $('#box_add').css({'background-color': (myBoolean?'#ffffff':'#fafafa') });
        if(!myBoolean) {
                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,
                });
        }
        $("#bfile_add").prop('disabled', myBoolean);
    });
    $("#box_add").blur(function() {
        if($.trim($("#box_add").val())=="") {
            $(this).prop('readonly', false);
        }
    });
});

function notif(obj) {
    alert(obj.msg)
}

Open in new window

0
 

Author Comment

by:peter-cooper
ID: 40360006
@leakim

What is happening with your code is that the msg is being displayed as soon as the user clicks the 'New Intake With Files' button. Ideally, what I wanted to happen, is when the the user finishes typing, it triggers the msg then sets the input as readonly.

If the user then clicks the 'New Intake' button, this then resets the input back to normal for further input and no msg is displayed. Hope that is clearer for you. Thanks
0
 

Author Closing Comment

by:peter-cooper
ID: 40403672
Thank you
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

741 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