Solved

Make input readonly when it loses focus

Posted on 2014-10-03
12
217 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

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 embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

730 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