JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community Forums > Programming > JavaScript Development
Reload this Page

Changing Readonly property using Javascript


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old January 28th, 2004, 12:30 AM
v_sharma77 v_sharma77 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 5 v_sharma77 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Changing Readonly property using Javascript
Hi,

I am using a table which contains text boxes. I need the text boxes to be read only untill one of the related text box is not populated by the user.
For Ex. I want the user to first fill the quantity and then other details. Unless the quantity is filled the text boxes containing other details sould remain read only.

Thanks in advance
Reply With Quote
  #2  
Old January 28th, 2004, 05:58 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Use the "disabled" keyword in your form item. E.g.
Code:
<input type="text" name="foo" value="bar" disabled>
Reply With Quote
  #3  
Old January 28th, 2004, 07:44 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
  
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
And as a companion to stumpy's suggestion, for any text box that governs others, call a function that takes a list of field names and sets those fields' disabled property to false upon entry of text into the governing text box.
Reply With Quote
  #4  
Old February 17th, 2004, 04:28 PM
sburcham's Avatar
sburcham sburcham is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 3 sburcham User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Can you guys expand on this? I have the same issue, but no matter what I try I can't get it to work.

I have readonly in the input text field and my javascript looks at the value of another field. If the value in the "make" field is set to JD then I want the "model" field set to readonly, else let the user edit this field.
Reply With Quote
  #5  
Old February 17th, 2004, 07:33 PM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Show us your JS so far.
Reply With Quote
  #6  
Old February 18th, 2004, 03:50 PM
sburcham's Avatar
sburcham sburcham is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 3 sburcham User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
JS -

function checkMake() {
if (document.newopp.make.value == "JD"){
newopp.model.diabled = true;
}
else {
newopp.model.disabled = false;
}
}

HTML -

<input class="main" type="text" name="model" size="15" value="" maxlength="30" OnFocus="focusCell('_model');checkMake();" OnBlur="blurCell('_model');" readonly>
-----

I have tried setting the js to newopp.model.readonly = true and how it is now. Neither seem to work.

Any help is greatly appreciated.
Reply With Quote
  #7  
Old February 18th, 2004, 05:31 PM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Try this (I've removed anything that wasn't required, and fixed up a few of your typo's)
Code:
<script type="text/javascript">
function checkMake() {
  if (document.newopp.make.value == "JD"){
    document.newopp.model.disabled = true;
  }
  else {
    document.newopp.model.disabled = false; 
  }
}
</script>
<form name="newopp">
<input type="text" name="make" value="JD">
<input type="text" name="model"  OnFocus="checkMake();" disabled>
</form>
Note that is is definately not a good idea to set any form items as disabled by default, as those users with JS turned off will not be able to correctly complete the form... unless of course if that is your intention.

Let me know if the above code is alright.
Reply With Quote
  #8  
Old February 19th, 2004, 09:50 AM
sburcham's Avatar
sburcham sburcham is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 3 sburcham User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
That didn't do the trick. When the disabled keyword is used in the input field the field is disabled all of the time. If I leave the disabled keyword out then it seems to work. I have some other javascripts that run on the onFocus and onBlur that highlight and unhilight the row. I found a way to get that to work as well. When the field is disabled by the keyword then those js scripts did not work either.

Hopefully this is clear, if not I can try and clear it up further. Thanks for the help, it eventually lead to a solution.
Reply With Quote
  #9  
Old February 20th, 2004, 12:38 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Ok - just did a quick test - it's most likely not working because you can't give a disabled object focus... Makes sense. So, instead, put the checkMake function call on the "make" object, and fire it using the onBlur event.
Reply With Quote
  #10  
Old February 20th, 2004, 12:40 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Just tested my theory - works like a charm!
Reply With Quote
  #11  
Old April 29th, 2005, 02:16 AM
bruceusername bruceusername is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Apr 2005
Posts: 1 bruceusername User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 18 m 9 sec
Reputation Power: 0
Google sent me.
The above code is good, but i want to know if it's possible to do it with the "readonly" attribute instead of "disabled".
anyone know?

edit: yes, only readonly is spelt readOnly
Last edited by bruceusername : April 29th, 2005 at 02:23 AM. Reason: only
Reply With Quote
  #12  
Old August 29th, 2006, 08:01 PM
sweimh sweimh is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jun 2004
Posts: 2 sweimh User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 45 sec
Reputation Power: 0
Quote:
Originally Posted by bruceusername
Google sent me.
The above code is good, but i want to know if it's possible to do it with the "readonly" attribute instead of "disabled".
anyone know?

edit: yes, only readonly is spelt readOnly


Google sent me too.
Thanks for coming back and share what you found out.
Saved my butt!
Reply With Quote
  #13  
Old November 1st, 2007, 01:07 PM
jaeagle jaeagle is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Nov 2007
Posts: 1 jaeagle User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 14 m 49 sec
Reputation Power: 0
not sure if anyone will still be looking at this but can any of you help

i am trying to do the same as above but rather that a text box having a value in it i am after a set of radio buttons to do the same job any help would be great
Reply With Quote
  #14  
Old September 20th, 2008, 06:20 PM
malcolmnew malcolmnew is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Sep 2008
Posts: 2 malcolmnew User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 22 m 33 sec
Reputation Power: 0
Smile Another Approach
The problem with disabled and readonly is that they wont be reenabled - at least I cannot get them to do so. I have solved the problem by using style.visibility = 'hidden' | 'visible' and style.display = 'none' | 'block' (or whatever). This works and I don't see the point of knocking ones head against a brick wall!
Reply With Quote
  #15  
Old December 8th, 2008, 11:46 AM
daitenshi daitenshi is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Dec 2008
Posts: 1 daitenshi User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 23 m 40 sec
Reputation Power: 0
remove readonly
Hi,
I was searching for something about removing the readonly property and saw this.. I just thought I might add:

You can remove attributes with element.removeAttribute(param1, param2)

eg: e.removeAttribute('readonly','readonly');
Reply With Quote
  #16  
Old February 13th, 2009, 09:12 AM
lucasmartins lucasmartins is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Feb 2009
Posts: 1 lucasmartins User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 m 3 sec
Reputation Power: 0
Smile
Quote:
Originally Posted by v_sharma77
Hi,

I am using a table which contains text boxes. I need the text boxes to be read only untill one of the related text box is not populated by the user.
For Ex. I want the user to first fill the quantity and then other details. Unless the quantity is filled the text boxes containing other details sould remain read only.

Thanks in advance


You can do:

Code:
element.readOnly = true


*
Lucas Martins
http://www.lucasmartins.com.br/blog
Reply With Quote
  #17  
Old March 18th, 2009, 11:17 AM
jej1216 jej1216 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2009
Location: New Mexico
Posts: 2 jej1216 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 37 m 44 sec
Reputation Power: 0
A twist on this displayonly or disabled topic
Quote:
Originally Posted by lucasmartins
You can do:

Code:
element.readOnly = true


*
Lucas Martins
http://www.lucasmartins.com.br/blog


Thus may require a new thread, but I have a slightly different issue. I have a date field which has a JS Calendar Pop-up to load the date. I want the user to be unable to type into the date field directly - just use the Calendar popup. Using disable makes the popup not work.

I am a JS neophyte - any help would be appreciated.

Here's my code:
Code:
<td>Incident Date:<br><input type="text" name="inc_date" value="" size="12">

<a href="#"
   onClick="cal2.select(document.forms['irform'].inc_date,'anchorinc','yyyy-MM-dd'); return false;"
   NAME="anchorinc" ID="anchorinc">calendar</a></td>


The Javascript is CalendarPopup.js
by Matt Kruse <matt@mattkruse.com>
WWW: http://www.mattkruse.com/




jej1216
Reply With Quote
  #18  
Old March 18th, 2009, 01:16 PM
jej1216 jej1216 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2009
Location: New Mexico
Posts: 2 jej1216 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 37 m 44 sec
Reputation Power: 0
Oops - readonly works like a charm
Oops - readonly works like a charm, exactly what I needed.

Sorry for the wasted post.

jej1216


Quote:
Originally Posted by jej1216
Thus may require a new thread, but I have a slightly different issue. I have a date field which has a JS Calendar Pop-up to load the date. I want the user to be unable to type into the date field directly - just use the Calendar popup. Using disable makes the popup not work.

I am a JS neophyte - any help would be appreciated.

Here's my code:
Code:
<td>Incident Date:<br><input type="text" name="inc_date" value="" size="12">

<a href="#"
   onClick="cal2.select(document.forms['irform'].inc_date,'anchorinc','yyyy-MM-dd'); return false;"
   NAME="anchorinc" ID="anchorinc">calendar</a></td>


The Javascript is CalendarPopup.js
by Matt Kruse <matt@mattkruse.com>
WWW: http://www.mattkruse.com/




jej1216
Reply With Quote
  #19  
Old July 23rd, 2011, 12:24 PM
rmarks1 rmarks1 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jul 2011
Posts: 1 rmarks1 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 m 57 sec
Reputation Power: 0
readOnly
that is readOnly with an UPPER CASE LETTER "O".

I wasted almost an hour using a lower case "o" and having it not work.
Reply With Quote
  #20  
Old November 9th, 2011, 09:56 PM
Theron451 Theron451 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Nov 2011
Posts: 4 Theron451 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 12 m 42 sec
Reputation Power: 0
And as a companion to stumpy's suggestion, for any text box that governs others, call a function that takes a list of field names and sets those fields' disabled property to false upon entry of text into the governing text box.
URL
URL
Reply With Quote
  #21  
Old November 27th, 2011, 10:58 PM
Debra 785 Debra 785 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Nov 2011
Posts: 6 Debra 785 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m
Reputation Power: 0
And as a companion to stumpy's suggestion, for any text box that governs others, call a function that takes a list of field names and sets those fields' disabled property to false upon entry of text into the governing text box.
Reply With Quote
  #22  
Old March 12th, 2012, 10:45 PM
hhschjkm0 hhschjkm0 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2012
Posts: 4 hhschjkm0 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 m 55 sec
Reputation Power: 0
Thus may require a new thread, but I have a slightly different issue. I have a date field which has a JS Calendar Pop-up to load the date. I want the user to be unable to type into the date field directly - just use the Calendar popup. Using disable makes the popup not work.

I am a JS neophyte - any help would be appreciated.URL
URL
URL
Reply With Quote
  #23  
Old July 3rd, 2012, 10:44 PM
MariluChester MariluChester is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Feb 2012
Posts: 8 MariluChester User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 21 m 20 sec
Reputation Power: 0
I have readonly in the input text field and my javascript looks at the value of another field
Reply With Quote
  #24  
Old July 4th, 2012, 04:05 AM
William364 William364 is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jul 2012
Posts: 3 William364 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 m 7 sec
Reputation Power: 0
Show us your JS so far.URLURLURLURL
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Programming > JavaScript Development > Changing Readonly property using Javascript

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates
Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap