clearning HTML textarea

Hi, I want to clear a textarea with an onclick. The code below does not give any error but it does not clear the value.

<textarea id=\"reply_$row[id]\" name=\"reply_$row[id]\" cols=80 rows=5></textarea><input type=\"submit\" value=\"Send Reply\"> <input type=\"button\" onclick=\"document.getElementById('reply_$row[id]').value = '';
document.getElementById('msg_$row[id]').style.display='none';\" value=\"Cancel\">

Open in new window

Robert SaylorSenior DeveloperAsked:
Who is Participating?
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Works for me

I would however change
<a href="javascript:void(0)"
<a href="#"
return false">Reply</a>

PS: About the missing contents of the MDN page, I can edit it and add it if I wish.
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
When I test the code without the '\' for PHP like below, it works fine.
<textarea id="reply_$row[id]" name="reply_$row[id]" cols=80 rows=5></textarea>
<input type="submit" value="Send Reply"> <input type="button" onclick="document.getElementById('reply_$row[id]').value = ''; document.getElementById('msg_$row[id]').style.display='none';" value="Cancel">

Open in new window

Dave BaldwinFixer of ProblemsCommented:
From :
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Michel PlungjanIT ExpertCommented:
Dave: Although correct, I suggest you read
I use MDN as reference instead of the VERY flaky w3schools who despite of the name has nothing to do with w3org

And the error is likely that you have a different ID than the one you access

document.getElementById('msg_$row[id]') is likely not the same as the ID of the textarea
Dave BaldwinFixer of ProblemsCommented:
@ mplungjan, we've had this discussion before.  W3fools are flakier and less useful.  You could at least post a link to something relevant on MDN.
Michel PlungjanIT ExpertCommented:
the fact that there was a need for w3fools at all says it all. It is not updated but neither is w3schools sufficiently

Here are the relevant links

MDN: document.getElementById(id) where id is a case-sensitive string representing the unique ID of the element being sought.

W3Org: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
Dave BaldwinFixer of ProblemsCommented:
Thank you.  You know a lot, you don't have to be an ignorant critic like the W3fools.
Michel PlungjanIT ExpertCommented:
I would just really wish w3schools would clean up their act. It teaches so many bad habits and mistakes to beginners. I occasionally go there when I forgot if it is left-margin or margin-left but when people link to their JavaScript and I take a look, I am amazed of the poor quality of the code. At least at MDN I can fix the mistakes in the examples :)
Dave BaldwinFixer of ProblemsCommented:
Considering the amount of HTML and javascript from 1999 that we see here that comes from other sites, I don't think they're doing that bad.  Anytime I see a tag that says <script language='Javascript 1.2'.. (that book was published in 1997) or comments about IE4 or Netscape4...  That's when I figure they're not trying to keep up at all.  And there is a lot of that code still out there on web sites as code examples.

And speaking of MDN:

And this from Oracle:
Robert SaylorSenior DeveloperAuthor Commented:
Hi, my id's are not starting with any numbers. I am passing a php varible. The 1st code re-write is the same code I used. I was escaping the " because I was using it in a php print statement.

I re-wrote the code removing the php escape strings so you can see.

                                <textarea id="reply_<?=$row['id'];?>" name="reply_<?=$row['id'];?>" cols=200 rows=5></textarea>
                                <input type="submit" value="Send Reply"> <input type="button" onclick="document.getElementById('reply_<?=$row['id'];?>').value = '';
                                document.getElementById('msg_<?=$row['id'];?>').style.display='none';" value="Cancel">

Open in new window

What I am trying to do when they click on a reply link it expands the hidden TR and displays the textbox. The user can then type in text and send a message. Or they can click cancel, the value of the textbox is cleared and the TR is once again hidden.

Here is what the HTML looks once php did it's job:

<tr><td>Robert Saylor</td><td>June 02, 2013</td><td><a href="javascript:void(0)" onclick="document.getElementById('msg_2').style.display='table-row'">Reply</a></td></tr>
			<tr><td colspan=3><p>test</p><hr></td></tr>
			<tr style="display:none" id="msg_2">
			<td colspan=3>
				<form action="employer.php" method="post">
				<input type="hidden" name="section" value="send_msg_reply">
				<input type="hidden" name="r_id" value="6">
				<input type="hidden" name="id" value="2">
				<textarea id="reply_2" name="reply_2" cols=200 rows=5></textarea>
				<input type="submit" value="Send Reply"> <input type="button" onclick="document.getElementById('reply_2').value = '';
				document.getElementById('msg_2').style.display='none';" value="Cancel">


Open in new window

Another odd issue trying to get the display to be in a "table-row" but it's staying in the 1st TD area where I want it to go into the colspan. See screen shot.
Robert SaylorSenior DeveloperAuthor Commented:
I think it's my HTML editor js causing the value not to reset. As far as moving it properly in the TR TD I am just going to move it to the top of the page and make it visable. Thanks anyhow but I think the code I posted and looks like you guys pretty much said that so I am going to close this request. Thanks for taking the time to look. Enjoy the points.

Thanks for posting the simulator. I will book mark that and see if I can use it to pull it out of any other javascript conflicts. Odd thing firebug did not show me any errors with all my js put together.
All Courses

From novice to tech pro — start learning today.