Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript to add values into different text area boxes...

Status
Not open for further replies.

youradds

Programmer
Joined
Jun 27, 2001
Messages
817
Location
GB
Hi. Basically, my Javascript sucks. I know very basic stuff, but what I am asking verges on the edge of my knowledge.

What I am trying to do is have a list of values in the form of normal HTML. They need to have a link, or dropdown box, which the user can click on to add it into a 'write-only' text-area box.

Does anyone have any ideas?

Basically, the only variables that need to be passed in are title and ID number of the link.

Would anyone be able to get me started/help me on this one?

Cheers

Andy
 
Hi Andy,

There is no easy way to make a normal HTML <textarea...> write-only. it can be done but it takes some work.

I would recomend using a <select..> box with the size set to the number of entries. That way you could make it larger as you add items to it, or make it scroll if you don't want it to mess with the page layout.

If you need help writing those routines you can search on this forum, or just ask here and I'll post some code you can tear apart.
Have fun.


Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
I've got the select stuff working, you just enter 'readonly' in the teaxt area specifics. Its just that I don't know how to populate the text-area with given data via javascript.

Can you help me on that?

Cheers

Andy
 
Can you post your code to be viewed to help you out?
 
Please find HTML below for an example of what I am trying to do (minus the Javascript)

Code:
<html>

<head>
<meta http-equiv=&quot;Content-Language&quot; content=&quot;en-gb&quot;>
<meta name=&quot;GENERATOR&quot; content=&quot;Microsoft FrontPage 5.0&quot;>
<meta name=&quot;ProgId&quot; content=&quot;FrontPage.Editor.Document&quot;>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot;>
<title>New Page 2</title>
</head>

<body>

<p align=&quot;center&quot;>Add Links to boxes here....</p>
<p align=&quot;center&quot;>Link1 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 2 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 3 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 4 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 5 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 6 [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] [
<a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;>Link 7  [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 1</a> ] 
[ <a href=&quot;SomeJavaScriptHere&quot;>add to box 2</a> ] [ <a href=&quot;SomeJavaScriptHere&quot;>
add to box 3</a>] [ <a href=&quot;SomeJavaScriptHere&quot;>add to box 4</a> ]</p>
<p align=&quot;center&quot;> </p>

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse&quot; bordercolor=&quot;#111111&quot; width=&quot;100%&quot; id=&quot;AutoNumber1&quot;>
  <tr>
    <td width=&quot;50%&quot;>
    <p align=&quot;center&quot;>
      Box 1<br>
      <textarea rows=&quot;2&quot; name=&quot;box1&quot; cols=&quot;20&quot;></textarea></p>
    </td>
    <td width=&quot;50%&quot;>
    <p align=&quot;center&quot;>Box 2<br>
      <textarea rows=&quot;2&quot; name=&quot;box2&quot; cols=&quot;20&quot;></textarea></td>
  </tr>
  <tr>
    <td width=&quot;50%&quot;>
    <p align=&quot;center&quot;><br>
    Box 3<br>
      <textarea rows=&quot;2&quot; name=&quot;box3&quot; cols=&quot;20&quot;></textarea></td>
    <td width=&quot;50%&quot;>
    <p align=&quot;center&quot;><br>
    Box 4<br>
      <textarea rows=&quot;2&quot; name=&quot;box4&quot; cols=&quot;20&quot;></textarea></td>
  </tr>
</table>

</body>

</html>

Any ideas?

Cheers

Andy
 
hey Andy,


to add values to your textbox just use

textbox.value = textbox.value + 'New data'

so the link would need to include:
onClick = &quot;Addtext('text');&quot;

then the function Addtext would be like:
Code:
function Addtext(txt) {
document.formname.fieldname.value = document.formname.fieldname.value + txt
}

you'll probably want to add a newline character in there also.

also... I've heard the readonly attribute only works in IE not NS.

Sounds like you've almost got it


Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Is there a way I could limit the number of lines? For example, in box 1 and 2 i only want 3 entries max, and the other 2 can have 4 entries.

You help is much appreciated :)

Cheers

Andy
 
Okay, here's a sample page with a &quot;read-only&quot; text area. Enter the data you want in the text box and press the &quot;Add&quot; button.

You can do the same thing with drop-down menus.

Save this as &quot;Sample.html&quot;:

Code:
<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;ThisForm&quot;>
      <p><input type=&quot;text&quot; id=&quot;Textie&quot; name=&quot;Textie&quot;></input><input type=&quot;button&quot; value=&quot;Add&quot; onclick=&quot;document.ThisForm.Boxie.value = document.ThisForm.Boxie.value + '\n' + document.ThisForm.Textie.value;return true;&quot;></input></p>
      <p><textarea rows=&quot;10&quot; cols=&quot;30&quot; disabled=&quot;disabled&quot; name=&quot;Boxie&quot; id=&quot;Boxie&quot;>noop</textarea></p>
    </form>
  </body>
</html>

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Ok, that works a charm :) Is there any way I can limit the number of additions to a text-area? i.e 4, 3,5,6 respectivly in each of the text areas?

Cheers

Andy
 
Number of lines? In a way, no, but in another way, yes.

The contents of a textarea isn't &quot;lines&quot;, but it can be limited to number of characters.

So, you multiply your textarea's col count by x, where x is the maximum number of lines you want to allow (for example, if the textarea is 30 columns and you want to limit it to 4 lines, that's 120 characters), and then you simply limit the number of characters to that amount.

That would go in the onclick action above.

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
If the box is read-only and your javascript is the only thing that adds lines to it, then you could count the newline characters to limit the lines.




Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
BTW: please use...

document.ThisForm.Boxie.value += ('\n' + document.ThisForm.Textie.value);

...rather than referencing the Boxie value twice... no need, really.
 
also, since the only way text is added to your textarea boxes is via clicking on a link, you can just have some global counter variables that go up by one each time something is added to a box.

so:
Code:
var linesAdded = 0;
function Addtext(txt)
{
  if (linesAdded < 3)
  {
    document.formname.fieldname.value +=  txt
    linesAdded++
  }
}
some syntax may be wrong there, but you get the idea
 
Thnaks guys... its working like a charm :)

Cheers

Andy
 
Hi guys..I'm back :)

I now have the following; (I didn't include everything, cos it would get too long, as there are 20+ boxes and buttons)

<script>
var linesAdded1 = 0;
function BoxAddtext1(txt) {
  if (linesAdded1 < 8) {
  document.ThisForm.box1.value += txt + '\n'
  linesAdded1++
 } else {
alert('You have entered more than 8 entries for table 1...sorry.')
}
}</script>

<input type=&quot;button&quot; name=&quot;box0_1button&quot; value=&quot;1&quot; onclick=&quot;BoxAddtext1('etetet test4'); document.ThisForm.box0_1button.disabled=true;document.ThisForm.box0_2button.disabled=true;document.ThisForm.box0_3button.disabled=true;document.ThisForm.box0_4button.disabled=true;document.ThisForm.maintable0.disabled=true;&quot; style=&quot;font-size: 10px; font-family: Tahoma; border: 1px solid #008000&quot;>

<table border=&quot;0&quot; cellpadding=&quot;3&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse&quot; bordercolor=&quot;#111111&quot; width=&quot;100%&quot; id=&quot;AutoNumber1&quot; height=&quot;539&quot;>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Head Table<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;headtable&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 1<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box1&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 2<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.<br>
</font>
<textarea rows=&quot;4&quot; name=&quot;box2&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;70&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 3<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box3&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;70&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 4<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box4&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;70&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 5<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box5&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 6<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box6&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 7<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box7&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 8<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box8&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 9<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box9&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 10<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box10&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 11<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box11&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 12<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box12&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 13<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box13&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 14<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box14&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 15<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box15&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 16<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box16&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;68&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 17<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box17&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;62&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 18<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box18&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;62&quot;>
<font face=&quot;Tahoma&quot; size=&quot;2&quot;>Table 19<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box19&quot; cols=&quot;26&quot; readonly></textarea></td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;62&quot;><font face=&quot;Tahoma&quot; size=&quot;2&quot;>
Table 20<br>
</font><font face=&quot;Tahoma&quot; size=&quot;1&quot; color=&quot;#FFFFFF&quot;>.</font><br>
<textarea rows=&quot;4&quot; name=&quot;box20&quot; cols=&quot;26&quot; readonly></textarea></td>
</tr>
<tr>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;19&quot;> </td>
<td width=&quot;33%&quot; align=&quot;center&quot; height=&quot;19&quot;> </td>
<td width=&quot;34%&quot; align=&quot;center&quot; height=&quot;19&quot;> </td>
</tr>
</table>
<p align=&quot;center&quot;>
<input type=&quot;submit&quot; value=&quot;Save&quot; name=&quot;B1&quot;>    <input type=&quot;reset&quot; value=&quot;Reset&quot; name=&quot;B2&quot;></p>
</form>
<center>
<p><font face=Tahoma size=2> < <a href=&quot;index.php?action=table_planner&quot;>
Back to Table Planner</a> ></font></p>
</center></p>

</td></tr></table>

The problem is, that when I the user gets the alert() box appear, it still blanks out the buttons. Is there something I could add into the <script></script> stuff, that would stop it in its tracks, and not blank out the buttons appropriatly? I've tried adding;

return false

and

exit

but the first one does't seem to do anything, and the other one gives a JS error :(

Any ideas?

TIA.

Andy
 
HI Andy,

Maybe I'm not seeing the whole picture but when I tried your code it disabled the buttons immediately, even after one click. So I removed all of the button.disabled statements from the button itself. Then when the alert box finally did apear the buttons didn't disable afterwards.
This line:
Code:
<input type=&quot;button&quot; name=&quot;box0_1button&quot; value=&quot;1&quot; onclick=&quot;BoxAddtext1('etetet test4'); document.ThisForm.box0_1button.disabled=true;document.ThisForm.box0_2button.disabled=true;document.ThisForm.box0_3button.disabled=true;document.ThisForm.box0_4button.disabled=true;document.ThisForm.maintable0.disabled=true;&quot; style=&quot;font-size: 10px; font-family: Tahoma; border: 1px solid #008000&quot;>
I changed to:
Code:
<input type=&quot;button&quot; name=&quot;box0_1button&quot; value=&quot;1&quot; onclick=&quot;BoxAddtext1('etetet test4');&quot; style=&quot;font-size: 10px; font-family: Tahoma; border: 1px solid #008000&quot;>

I'm sure there must have been some reason for disabling all of those buttons in the first place... But if you don't disable them, then... well... they wont be disabled.



Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
I need them to be unvalidated. Basically, once they successfully click the button, and it adds it to the text-area box, they need to be de-activated. Its for a table planner; so they can't assign the same person to more than one table (thus the blanking out). Is there no way I can check to see if the item was added ok, before blanking out the buttons?

Cheers

Andy
 
well,

you could use:

textbox.value.indexOf(&quot;name&quot;)

to see if a name was in there. but it seems like if you added it you shouldn't have to check if it is there. It should be there. I think I'm not seeing the big picture so well. Feel free to email me the whole page and I'll see what I can do.

regards



Travis Hawkins
BeachBum Software
travis@cfm2asp.com
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top