PDA

View Full Version : 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


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
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



<!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:


<!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:


<!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
<!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! :D