Add text to the end of another chunk of text.

**kasei** · 12-28-2007, 06:08 AM

I have a page with several lines of text and I want users to be able to add new lines onto the bottom of the text without disturbing the existing text, just like a chat program.

For example, if the original text was:

Dave: What do you want for Christmas?
Joe: I want candy!
Carrie: I want a Barbi Doll!
Jackson: I want a bicycle!

Then I could submit a message to go onto the bottom, like this:

Dave: What do you want for Christmas?
Joe: I want candy!
Carrie: I want a Barbi Doll!
Jackson: I want a bicycle!
Mike: I want a puppy!

I can chage the text using
document.getElementById('id').innerHTML = msg;
but that just replaces everything.

I thought I could grab the existing text with
var old = document.getElementById('id');
and then replace everything with
document.getElementById('id').innerHTML = old + '<br>' msg;
but what I get looks like this:

[object]
Mike: I want a puppy!

What am I doing wrong?

**codeexploiter** · 12-28-2007, 06:38 AM

In the following manner you can solve this problem

Code:

document.getElementById('id').innerHTML += msg;

Or you can solve it using fully DOM based method. If you need that please let me know

**kasei** · 12-28-2007, 07:07 AM

Originally Posted by codeexploiter

you can solve it using fully DOM based method. If you need that please let me know

Yes, I'd appreciate that, if it's not too much trouble. It would be more cross-browser compatable, right?

**codeexploiter** · 12-28-2007, 07:08 AM

It is cross browser compatible but look at another version of what you are looking

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
			#res{
				width: 500px;
				overflow-y:auto;
				padding: 5px;
				background-color: #e5eef9;
				color: #000;
				border:1px solid red;
				height: 400px;
			}
		</style>
		<script type="text/javascript">
			var userName = "";
			var tmp = 0;
			function sendMesg(){
				if (userName == "") {
					userName = trim(document.getElementById('nam').value);
					if(userName.length < 1){
						alert('please enter a name in the name field');
						document.getElementById('nam').focus();
						return false;
					}
				}
				var mesg = trim(document.getElementById('mesg').value);
				if(mesg.length == 0){
					alert('please enter a message in the message field');
					document.getElementById('mesg').focus();
					return false;
				}
				if(tmp != 0)
					document.getElementById('res').appendChild(document.createElement('br'));
				else
					tmp++;
					
				document.getElementById('res').appendChild(document.createTextNode(userName +" : "+mesg));
				document.getElementById('mesg').value = "";
				document.getElementById('mesg').focus();
				document.getElementById('nam').disabled = true;
			}
			
			function trim(str) {
				return str.replace(/^\s+|\s+$/g, '');
			}
		</script>
	</head>
	<body>
		<div id="res">
			
		</div>
		<br/><br/>
		<form name="f1">
			<label>Name : </label> <input type="text" name="nam" id="nam" value="" tabindex="1" /><br/>
			<label>Mesg : </label> <input type="text" name="mesg" id="mesg" value="" tabindex="2" /><br/>
			<input type="button" name="send" id="send" value="send" tabindex="3" onclick="javascript: sendMesg();"/><br/>
		</form>
	</body>
</html>

**jscheuer1** · 12-28-2007, 07:17 AM

I worked this out, simpler I think:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {
display:block;
}
form {
margin-bottom:1em;
}
</style>
<script type="text/javascript">
function addMsg(id, msg){
var el=document.getElementById(id);
el.appendChild(document.createElement('br'));
el.appendChild(document.createTextNode(msg));
}
</script>
</head>
<body>
<form action="#" onsubmit="addMsg('msgarea', this.elements['msg'].value);return false;">
<div>
<input type="text" value="Mike: I want a puppy!" name="msg">
<input type="submit" value="Add!">
</div>
</form>
<div id="msgarea">
Dave: What do you want for Christmas?<br>
Joe: I want candy!<br>
Carrie: I want a Barbi Doll!<br>
Jackson: I want a bicycle!
</div>
</body>
</html>

**kasei** · 12-28-2007, 07:25 AM

Yes, that is perfect!

Thank you very much, both of you!

**kasei** · 12-28-2007, 07:50 AM

One more question, if I used this method:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
input {margin:0pt; font-size: 9pt;}
form {margin: 0pt;}
textarea {margin:0pt; font-size: 9pt;}
</style>

<script type="text/javascript">
function addMsg(id, msg){
var el=document.getElementById(id);
el.appendChild(document.createElement('br'));
el.appendChild(document.createTextNode(msg));
}
</script>

</head>
<body>

<textarea cols=50 rows=20 id="msgarea"></textarea>
<form action="#" onsubmit="addMsg('msgarea', this.elements['msg'].value);return false;">
<div>

<input type="text" value="" name="msg">&nbsp;<input type="submit" value="Add!">
</div>
</form>

</body>
</html>

how can I set the focus on the bottom of the textarea so that the latest post is visible when the text becomes longer than the textarea is tall?

**jscheuer1** · 12-28-2007, 10:32 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {
margin:0;
font-size:90%;
}
form {
margin:0;
}
textarea {
margin:0;
font-size:90%;
display:block;
}
</style>
<script type="text/javascript">
function addMsg(form, to, from){
var e=form.elements;
e[to].value+='\n'+e[from].value;
e[to].scrollTop = e[to].scrollHeight;
return false;
}
</script>
</head>
<body>
<form action="#" onsubmit="return addMsg(this, 'msgarea', 'msg');">
<div>
<textarea cols=50 rows=20 name="msgarea"></textarea>
<input type="text" value="" name="msg">&nbsp;<input type="submit" value="Add!">
</div>
</form>

</body>
</html>

**kasei** · 12-28-2007, 01:19 PM

Thanks again!

Thread: Add text to the end of another chunk of text.

Thread Tools

Search Thread

Add text to the end of another chunk of text.

Bookmarks

Bookmarks

Posting Permissions