Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onClick() to make text area readonly

Status
Not open for further replies.
justride

justride

Programmer
Jan 9, 2004
251
US
I need to make a text area readonly or writeable depending on what a user select from a list in another field.

when the user selects an item from the list a jscript function is called, to set values in the text area, i just dont know how to disable it or undisable it dynmacially on each change.

thanks for the help.
Chris
 
Sort by date Sort by votes
if by "list" you mean "select box", do something like this:

Code: 
<select onchange="this.form.textAreaName.readOnly=(this.selectedIndex==0);" name="s1">

note: change "textAreaName" to the name of your text area. change "0" to the actual offset of the option in the select box you want to test for (the first option is 0, second option is 1, etc.).

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
I'll have to try later, Im at work now, but thanks so much for the fast response.

is this making it read only if the the option selected is equivalent to 0? I tried a variation of this and didnt have the best luck but I will try your tonight, and let you know if there are problems.
 
Upvote 0 Downvote
no, it makes the textarea read only if you select the FIRST option. of course, when a page loads, the first option is usually already selected and therefore the textarea will not be read-only immediately.

here's a simple example that may help you understand:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
</head>

<body>

<form name="f">
<select name="s" onchange="this.form.ta.readOnly=(this.selectedIndex==1);">
    <option>Oth Option</option>
    <option>1st Option</option>
    <option>2nd Option</option>
    <option>3rd Option</option>
</select><br />
<textarea name="ta" style="height: 200px; width: 200px;">stuff</textarea>
</form>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
well i need to toggle between making it read only and not depending on the fields the user selects.
 
Upvote 0 Downvote
if the user selects option 1 from a select tag then onselect the the text area field needs to be writable so they can add comments, the other select options 0, 2,3 require the text area to be read only becasue those options do not require any text to be entered. If you know how to make that area dissapear altogether that could be an option too.
 
Upvote 0 Downvote
now use a function:

Code: 
function blah(s, ta) {
    switch( s.selectedIndex ) {
        case 0,2,3:
            ta.readOnly = true;
            ta.style.display = 'none';
            break;
        default:
            ta.readOnly = false;
            ta.style.display = '';
    }
}

and call it like this:

Code: 
<select onchange="blah(this,this.form.[red]textAreaName[/red]);" ... >

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
ok this works great, now... dynamically on the initial load, i know the value that has previously been selected that stored in the db, I need to call this function and pass the value so I can detrmine whether or not to initially display the text area. right now its there by default but then dissapears when i click diff options. It's there by default though and thats not good.

when I call this function after the form has been created, I am getting a document null error, what shoudl the call syntax be.

I have
Code: 
echo "<script>blah($phpselectvar, document.form.editedtext);</script>";
 
Upvote 0 Downvote
make this your body tag:

Code: 
<body onload="blah(document.forms['formName'].elements['selectName'], document.forms['formName'].elements['textAreaName']);">

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
this didnt work, i dont have any errors, but on the initial load of the page, the text area appears.
 
Upvote 0 Downvote
this works though...
</BODY>
<script>updateeditform(document.forms['editform'].elements['editedstatus'], document.forms['editform'].elements['editedcomments']);</script>
</HTML>

thanks for your help man you brought me a long way.

thanks,
chris
 
Upvote 0 Downvote
now for soem strange reason, and the function callshavent bee change, I receive jscript errors 'undefined' is null or not an object. the ta argument isnt getting sent to the function for some strange reason, or it is but the onject is null, any idea why this is?

thanks
 
Upvote 0 Downvote
justride,

I suspect that, given the two hour time difference between when you had working code, and when you had broken code, that you've changed something your end to break the JavaScript.

It might not be in the functions themselves, but could lie elsewhere - it's hard to say. Why not go through the changes you've made and see if you can spot where you've broken things?

As a programmer, you really should learn how to debug for yourself - you won't always have other people around to do it for you.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan,

Thanks for making me realize that I should debug this on my own. Jscript is a pain to debug, or maybe I am debugging wrong. Anyways, I restructured everything, and the implementation functions as expected.

Thanks guys
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
777
lexer
lexer
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
288
feherke
feherke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
893
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
669
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top