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.