Jump to content

Making A Button Add Text To A Textbox


Grabeorama
 Share

Recommended Posts

I have a form on my page, that I would like to have a few buttons above it.When these buttons are pressed, they should add text to the text box.For example:<input type="button" value="Make Text Bold" onclick="/*Add text to text box*/"><form><textarea cols="100" rows="5" name="message"></textarea></form>Thanks for helping :)

Link to comment
Share on other sites

<html><head><script type="text/javascript">function addtext(){document.getElementById("TextArea1").innerHTML="This text was added.";}</script></head><body><input type="button" value="Add Text" onclick="addtext()"><form><textarea id="TextArea1" cols="100" rows="5" name="message"></textarea></form></body></html>

A crude method, but it get's the job done.

Link to comment
Share on other sites

This is the entire code:

<html>	<head>		<title> Blog - Test </title>		<script type="text/javascript">		function addimage()			{				document.getElementById("comment").innerHTML += "This text was added.";			}		</script>	</head>		<body>		<div>HEADING</div>		<div id="contents">			Blog <br /> Games <br />		</div>				<div id="main">			<?php			 include('comments.txt');				if (isset($_REQUEST['comment']))					{						$comment 	= $_REQUEST['comment'];						$comment 	= str_replace("\n","<br />",$comment);						$comment 	= stripslashes($comment);						$name		= $_REQUEST['name'];						$name		= stripslashes($name);						$file 		= fopen("comments.txt","a+");						fwrite($file,'<p><b>Name:</b> '.$name.'<br />'.$comment.'</p><hr>');						fclose($file);						echo "<p>Thank you, your comment has been saved</p>";					}				else					{						echo "<p>Please leave a comment</p>";					}				echo "								<form action='test.php' method='post'>					Name: <input type='text' size='40' name='name'><br /><br />					Comment: <br />					<textarea cols='100' rows='5' name='comment'></textarea><br />					<input type='submit' value='Save'>				</form>";			?>		</div>	</body></html>

Link to comment
Share on other sites

1. If you're going to use document.getElementById(), then you need to pass it an id, not a name. You can assign a form element both a name and an id. Anman's post did show you this, but I can see how you might have overlooked it. :)2. If you want to add text to most elements, you do mess with the innerHTML. Form elements are not like most elements, however. They usually have a value attribute, and that's what you want to mess with. The textarea is an oddball. It does not have a value attribute in HTML, because any text you want to hard code gets put between the opening and closing tags. But in javascript, a textarea does have a value property that you can read and set. So try this:document.getElementById("comment").value += "This text was added.";Now, as an afterthought, I'm wondering how consistently browsers are going to feel about value += if the value you're starting with is empty. It's working for me in FF3, but if you get funny results somewhere else, that may be something to look at.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...