Solved

clearning HTML textarea

Posted on 2013-06-04
11
273 Views
Last Modified: 2013-06-05
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

0
Comment
Question by:Robert Saylor
  • 5
  • 4
  • 2
11 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
Comment Utility
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

0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
From http://www.w3schools.com/css/css_id_class.asp :
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Dave: Although correct, I suggest you read http://w3fools.com/
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
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
@ 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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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 (".").
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Thank you.  You know a lot, you don't have to be an ignorant critic like the W3fools.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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 :)
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2?redirectlocale=en-US&redirectslug=JavaScript%2FNew_in_JavaScript%2F1.2

And this from Oracle: http://docs.oracle.com/cd/E19957-01/816-6411-10/816-6411-10.pdf
0
 
LVL 6

Author Comment

by:Robert Saylor
Comment Utility
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">

				
				</form>
			</td></tr>

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.
expert-exchange-js1.jpg
expert-exchange-js2.jpg
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
Comment Utility
Works for me

http://jsfiddle.net/mplungjan/qfuQ2/

I would however change
<a href="javascript:void(0)"
onclick="document.getElementById('msg_2').style.display='table-row'">Reply</a>
to
<a href="#"
onclick="document.getElementById('msg_2').style.display='table-row';
return false">Reply</a>

PS: About the missing contents of the MDN page, I can edit it and add it if I wish.
0
 
LVL 6

Author Closing Comment

by:Robert Saylor
Comment Utility
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.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction This tutorial will give you a fast look what you can do with WhizBase. I expect you already know how to work with HTML at least, and that you understand the basics of the internet and how the internet works. WhizBase is a server-s…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now