Changing Readonly property using Javascript

Dev Articles Community Forums Sponsor:

January 27th, 2004, 11:30 PM

v_sharma77

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

stumpy

May contain nuts.

Dev Articles Regular (2000 - 2499 posts)

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

dhouston

Contributing User

Dev Articles Beginner (1000 - 1499 posts)

Join Date: May 2003

Location: Tennessee

Posts: 1,355

Time spent in forums: < 1 sec
Reputation Power: 17

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

sburcham

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

stumpy

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

sburcham

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

stumpy

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

sburcham

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

stumpy

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.

#10

February 19th, 2004, 11:40 PM

stumpy

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!

#11

April 29th, 2005, 01:16 AM

bruceusername

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

#12

August 29th, 2006, 07:01 PM

sweimh

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!

#13

November 1st, 2007, 12:07 PM

jaeagle

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

#14

September 20th, 2008, 05:20 PM

malcolmnew

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!

#15

December 8th, 2008, 10:46 AM

daitenshi

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');

#16

February 13th, 2009, 08:12 AM

lucasmartins

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

You can do:

Code:

element.readOnly = true

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

#17

March 18th, 2009, 10:17 AM

jej1216

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

#18

March 18th, 2009, 12:16 PM

jej1216

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

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