Solved

Make input readonly when it loses focus

Posted on 2014-10-03
12
210 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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 500 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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)

707 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

15 Experts available now in Live!

Get 1:1 Help Now