Change textarea to editable...

[alexjewell]

I have a confirmation page and on it, there's a textarea that's readonly. I want to have an edit button under it, however, that if clicked, the textarea isn't readonly anymore.

The textarea's name is created dynamically, so I can't call the textarea that way. However, I could give the form itself a name. Here's the code:



<form method="post" action="write.php">
<textarea name="dynamic_name" readonly>TEXTAREA CONTENT</textarea><br />
<input type="button" value="Edit" />
<input type="submit" value="Submit" />
</form>


Is there some sort of onclick event I can add to the Edit button?

[alexjewell]

Ok, I wrote something I think may work:

JavaScript:


var textareas =
document.getElementsByTagName("textarea");

for (var i=0, l=textareas.length; i < l; i++){
textareas[i].readonly = false; }

function addEvent(el,ev,fn){
if(el.addEventListener)
el.addEventListener(ev,fn,false)
else el.attachEvent('on'+ev, fn) }

addEvent(document.getElementById("editButton"), "click", enableTextareas);


HTML:


<form method="post" action="write.php">
<textarea name="dynamic_name" readonly>TEXTAREA CONTENT</textarea><br />
<input type="button" value="Edit" id="editButton" />
<input type="submit" value="Submit" />
</form>


It isn't working, though. What's wrong? I know it's because the function enableTextareas doesn't exist, but I'm not entirely sure what to put in that function...

[alexjewell]

Hey, I fixed the problem. Finished code:



function changeTextarea(bool,idis) {

if(bool) { document.getElementById(idis).readOnly = false;}

else { document.getElementById(idis).readOnly = true;}}


html:


<form method="post" action="something.php">
<textarea name="something" id="something" readonly>TEST</textarea><br />
<input type="button" value="Edit" onclick="changeTextarea(this.onclick,'something')" />
<input type="submit" value="Submit" />
</form>

[Twey]

If you swap those two arguments around, the second one can be optional. Mind the pseudo-XHTML.