Adding items to text area

Hello all. I have a form which contains an empty textarea, a textbox with add and delete button. If a user types in textbox and click add i want the value to be appended in the textarea. If the user tries to add again in the textbox i want it to be appended to a new line of the textarea. Same thing goes for the delete. The user have to select that number from the textarea and click on delete, that number should be deleted from the textarea.
Can anyone provide me some info or some links ?
Micheal_MaleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Graceful_PenguinCommented:
Does have the row attribute/property  but it can only be used to limit the amount of rows in the textarea not to manipulate the content like a list view. But the attached code might help you in the right direction.
<html>
<head>
<title>Interactive Textarea</title>
</head>
<body>
<table style="text-align: left; width: 100px;" border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr><td><input size="20" id="inputtext">
<input type="button" name="add" value="Add" onclick="addStuff()">
</td></tr>
<tr><td><textarea rows="15" id="textarea" name="box" cols="22"></textarea>
<input type = "button" name = "Delete" value = "Delete" onclick="deleteStuff()">;
</td></tr></tbody>
</table>
<br>
 
<script type = "text/javascript">
 
var oldText = new Array();
oldText[0] = "";
var i = 0; // global variable
 
function addStuff(){
var obj=document.getElementById('textarea');
obj.scrollTop=obj.scrollHeight;
 
if(document.getElementById('inputtext').value != "") {
oldText[i] = textarea.value;
document.getElementById('textarea').value+='" '+inputtext.value+'\n\n';
i++;
} 
}
 
function deleteStuff() {
if (i >= 1) {
document.getElementById('textarea').value = oldText[i-1];
i--;
var obj=document.getElementById('textarea');
obj.scrollTop=obj.scrollHeight;
 
}
}
 
</script>
 
</body>
</html>

Open in new window

0
Micheal_MaleAuthor Commented:
Than for the reply actually it is a list box instead of a textatea I will try myself first and will post if I have any questions
0
Micheal_MaleAuthor Commented:
I got the list box to worked as expected. Thanks for all your help :--).
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.