Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 293
  • Last Modified:

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

0
Robert Saylor
Asked:
Robert Saylor
  • 5
  • 4
  • 2
2 Solutions
 
Dave BaldwinFixer 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

0
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

 
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.
0
 
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 (".").
0
 
Dave BaldwinFixer of ProblemsCommented:
Thank you.  You know a lot, you don't have to be an ignorant critic like the W3fools.
0
 
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 :)
0
 
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: 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
 
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">

				
				</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
 
Michel PlungjanIT ExpertCommented:
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
 
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.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now