Solved

clearning HTML textarea

Posted on 2013-06-04
11
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 39221096
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 83

Expert Comment

by:Dave Baldwin
ID: 39221104
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
ID: 39221143
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39221152
@ 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
ID: 39221164
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39221176
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
ID: 39221192
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 83

Expert Comment

by:Dave Baldwin
ID: 39221286
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 7

Author Comment

by:Robert Saylor
ID: 39221806
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
ID: 39221854
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 7

Author Closing Comment

by:Robert Saylor
ID: 39223176
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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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