|
 |
|
Dev Articles Community Forums
> Programming
> JavaScript Development
|
Changing Readonly property using Javascript
Discuss Changing Readonly property using Javascript in the JavaScript Development forum on Dev Articles. Changing Readonly property using Javascript JavaScript Development forum discussing the use of JavaScript and its features as a powerful DOM manipulator. JavaScript is used in most websites to enrich the interface and enhance the user experience.
|
|
 |
|
|
|

Dev Articles Community Forums Sponsor:
|
|

January 27th, 2004, 11:30 PM
|
Registered User
|
|
Join Date: Jan 2004
Posts: 5
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
|

January 28th, 2004, 04:58 AM
|
 |
May contain nuts.
|
|
Join Date: Aug 2002
Posts: 2,056
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>
|

January 28th, 2004, 06:44 AM
|
 |
Contributing User
|
|
Join Date: May 2003
Location: Tennessee
Posts: 1,355
Time spent in forums: < 1 sec
Reputation Power: 16
|
|
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.
|

February 17th, 2004, 03:28 PM
|
 |
Registered User
|
|
Join Date: Feb 2004
Posts: 3
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.
|

February 17th, 2004, 06:33 PM
|
 |
May contain nuts.
|
|
Join Date: Aug 2002
Posts: 2,056
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
|
|
Show us your JS so far.
|

February 18th, 2004, 02:50 PM
|
 |
Registered User
|
|
Join Date: Feb 2004
Posts: 3
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.
|

February 18th, 2004, 04:31 PM
|
 |
May contain nuts.
|
|
Join Date: Aug 2002
Posts: 2,056
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.
|

February 19th, 2004, 08:50 AM
|
 |
Registered User
|
|
Join Date: Feb 2004
Posts: 3
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.
|

February 19th, 2004, 11:38 PM
|
 |
May contain nuts.
|
|
Join Date: Aug 2002
Posts: 2,056
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.
|

February 19th, 2004, 11:40 PM
|
 |
May contain nuts.
|
|
Join Date: Aug 2002
Posts: 2,056
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
|
|
Just tested my theory - works like a charm!
|

April 29th, 2005, 01:16 AM
|
Registered User
|
|
Join Date: Apr 2005
Posts: 1
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 01:23 AM.
Reason: only
|

August 29th, 2006, 07:01 PM
|
Registered User
|
|
Join Date: Jun 2004
Posts: 2
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!
|

November 1st, 2007, 12:07 PM
|
Registered User
|
|
Join Date: Nov 2007
Posts: 1
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
|

September 20th, 2008, 05:20 PM
|
Registered User
|
|
Join Date: Sep 2008
Posts: 2
Time spent in forums: 22 m 33 sec
Reputation Power: 0
|
|
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!
|

December 8th, 2008, 10:46 AM
|
Registered User
|
|
Join Date: Dec 2008
Posts: 1
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');
|

February 13th, 2009, 08:12 AM
|
Registered User
|
|
Join Date: Feb 2009
Posts: 1
Time spent in forums: 3 m 3 sec
Reputation Power: 0
|
|
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
|

March 18th, 2009, 10:17 AM
|
Registered User
|
|
Join Date: Mar 2009
Location: New Mexico
Posts: 2
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
|

March 18th, 2009, 12:16 PM
|
Registered User
|
|
Join Date: Mar 2009
Location: New Mexico
Posts: 2
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
|
|

July 23rd, 2011, 11:24 AM
|
Registered User
|
|
Join Date: Jul 2011
Posts: 1
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.
|

November 9th, 2011, 08:56 PM
|
Registered User
|
|
Join Date: Nov 2011
Posts: 4
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
|

November 27th, 2011, 09:58 PM
|
Registered User
|
|
Join Date: Nov 2011
Posts: 6
Time spent in forums: 7 m
Reputation Power: 0
|
|
|

March 12th, 2012, 09:45 PM
|
Registered User
|
|
Join Date: Mar 2012
Posts: 4
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
|

July 3rd, 2012, 09:44 PM
|
Registered User
|
|
Join Date: Feb 2012
Posts: 8
Time spent in forums: 21 m 20 sec
Reputation Power: 0
|
|
|

July 4th, 2012, 03:05 AM
|
Registered User
|
|
Join Date: Jul 2012
Posts: 3
Time spent in forums: 17 m 7 sec
Reputation Power: 0
|
|
Show us your JS so far.URLURLURLURL
|
Developer Shed Advertisers and Affiliates
Thread Tools |
Search this Thread |
|
|
Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|