javascript ? writing > 1 variable from array

rjmjrLPCS posted this at 21:11 — 13th December 2004.

Joined: Dec 2004

Hi everyone,

I have a question about writing one or more variables from an array to a particular area in a page (in this case the textarea of a form).

Here's what I have so far ...

The array for the staff names:

</script>

The links that will put the name of the Staff in the textbox:

Staff in charge of billing

Staff in charge of press releases

The textbox where the name will appear:

My Question:
Right now I can write one name from the array to the textbox, but I would like to write more than one name from the array to the text box on separate lines (because more than one staff member may be responsible)

Is there a way to do this? If anyone would kindly explain how and provide some code snipets \ examples I would really appreciate the help as I am trying to learn JavaScript.

thanks in advance,

rob

Abhishek Reddy posted this at 02:33 — 14th December 2004.

He has: 3,348 posts

Joined: Jul 2001

Try this for the links:

<a href="#" onClick="document.staffBox.textHere.value=document.staffBox.textHere.value+staffName[6]";>
Staff in charge of billing
</a>

<a href="#" onClick="document.staffBox.textHere.value=document.staffBox.textHere.value+staffName[5]";>
Staff in charge of press releases
</a>

That tells the script to first append the new staffName on to the old value and then replace all the content of the box with the new string.

rjmjrLPCS posted this at 15:20 — 14th December 2004.

He has: 5 posts

Joined: Dec 2004

Abhishek Reddy,
Thanks for taking the time to respond. Things still are not quite working right – and I’ll try to explain what’s going on – I may not have been clear enough in my initial request, so here goes …

I don’t want to add another name to the previously selected name in the textbox, rather I would like to write one or more names from the array into the box each time.

When I use your suggestion, I can click on the link over and over again continually placing the name in the box in addition to what happened to be there in the first place.

I guess I’m trying to say I’d like to wipe the slate clean every time (in the textbox) and have the onClick event place one or more of the array variables on separate lines.

For example:

If I click on the billing link the box pulls in 1 variable displaying like this:

Amy'

If I click on the press releases link the box pulls in 2 variables like this:

Jerry
Karen

I tried to accomplish this by using this link:

	<a href="#" onClick="document.staffBox.textHere.value=staffName[5]+staffName[7]";>
	Staff in charge of press releases
	</a>

Which seems to work in Firefox but has trouble in IE when clicking back and forth between links. Also, I would like line breaks between each name ( \r or \n maybe? couldn't get that to work)

Thanks again to Abhishek and anyone willing to help - I'll also put an HTML example page at the bottom of this post if it will help

Rob

<html>
<head>
<title></title>
</head>

<body>

	&lt;script type="text/javascript"&gt;


	staffName = new Array

	staffName[0] = "Joe"
	staffName[1] = "Dave"
	staffName[2] = "Alison"
	staffName[3] = "Paula"
	staffName[4] = "Brad"
	staffName[5] = "Jerry"
	staffName[6] = "Amy"
	staffName[7] = "Karen"


	&lt;/script&gt;

	<a href="#" onClick="document.staffBox.textHere.value=staffName[6]";>
	Staff in charge of billing
	</a>
<br />
	<a href="#" onClick="document.staffBox.textHere.value=staffName[5]";>
	Staff in charge of press releases
	</a>
<br />

<!-- suggestion 1 -->

<a href="#" 

onClick="document.staffBox.textHere.value=document.staffBox.textHere.value+staffName[6]";>
Staff in charge of billing
</a>

<br />

<a href="#" 

onClick="document.staffBox.textHere.value=document.staffBox.textHere.value+staffName[5]";>
Staff in charge of other stuff
</a>

<br />

<!-- another try at more than one variable -->

	<a href="#" onClick="document.staffBox.textHere.value=staffName[5]+staffName[7]";>
	Staff in charge of press releases
	</a>
<br />

	<form name="staffBox">
	<textarea rows="8" cols="25" name="textHere" readonly>

	</textarea>
	</form>

<body>

</html>

Abhishek Reddy posted this at 22:51 — 14th December 2004.

He has: 3,348 posts

Joined: Jul 2001

Ah, I get you now. This will require a bit more in-depth scripting which I don't have time for right now. I'll try to write somethig up later tonight.

rjmjrLPCS posted this at 23:48 — 14th December 2004.

He has: 5 posts

Joined: Dec 2004

Thank you so much!

Abhishek Reddy posted this at 08:58 — 15th December 2004.

He has: 3,348 posts

Joined: Jul 2001

<html>
<head>
  <title></title>
  &lt;script type="text/javascript"&gt;

    function init() {
      /* Use this function to initialise variables after
         the page has loaded (onload, called from <body>).
      */
      
      mybox = document.getElementById("staffTextBox");
      /* Shortcut to the textarea which we use later.
         Setting this is useful as well for when you add
         browser sniffers; it means you won't have to
         mess with the following code, just this. ;-)
      */
      
      staffName = new Array()
      staffName[0] = "Joe";
      staffName[1] = "Dave";
      staffName[2] = "Alison";
      staffName[3] = "Paula";
      staffName[4] = "Brad";
      staffName[5] = "Jerry";
      staffName[6] = "Amy";
      staffName[7] = "Karen";
    }

    function addStaff(staffGiven) {
      /* This is the function that is triggered when
         a link is clicked to view staff.
         Again, this is more portable and easier to
         code for in the html.
         
         USAGE: <a href="#" onclick="addStaff ('{staff_id_1}, {staff_id_2}, {staff_id_n}, ...')">Click</a>
      */
      
      mybox.value = "";
      /* Clear the box of any previous values, in case
         this is not the first time content will be added.
      */
         
      staffGiven = staffGiven.split(",");
      /* Split the supplied string (see USAGE note above)
         by its comma delimiters into an array that we
         can process.
      */
      
      for (i=0; i < staffGiven.length; i++) {
        /* loop through the array */
        
        if (i > 0) {        
          mybox.value += ", ";
        }
        /* If this is not the first name (and it is naturally
           not the last name -- see the for() conditions),
           add a comma for presentation.
        */

      
        mybox.value += staffName[staffGiven[i]];
        /* Update the box's content, adding the matches.
        */
      }
    }
  &lt;/script&gt;

</head>

<body onload="init()">

	<a href="#" onClick="addStaff('1')";>
	Staff in charge of billing
	</a>
<br />
	<a href="#" onClick="addStaff('3,4')";>
	Staff in charge of press releases
</a>
<br />

<!-- suggestion 1 -->

	<a href="#" onClick="addStaff('6,2,1,5,7')";>
	Staff in charge of billing
	</a>

<br />

	<a href="#" onClick="addStaff('7,2')";>
	Staff in charge of other stuff
	</a>

<br />

	<a href="#" onClick="addStaff('5,7,4')";>
	Staff in charge of press releases
	</a>
<br />

	<form name="staffBox">
	<textarea rows="8" cols="25" name="textHere" readonly="readonly" id="staffTextBox"></textarea>
	</form>

</body>

</html>

That works for me on Firefox. I haven't tested it in any other browser, but it will work on all that support the document.getElementById() method. If you want wider browser compatibility, you'd have to integrate a browser sniffer script, which should be fairly easy to do.

I hope you can follow it. I don't know if the comments are much help. I'll be happy to explain anything you want to know.

And I hope this is what you're looking for... I may still have misunderstood you.

rjmjrLPCS posted this at 13:48 — 16th December 2004.

He has: 5 posts

Joined: Dec 2004

Thanks for the post - the comments are great as they are really helping me get a handle on all of this. I appreciate the time and effort spent to help me out.

The script works great in Firefox - but for some reason does not work in IE 6.0 (scripting enabled - on a corporate network). After clicking on a link it will load the proper variables from the array but then the textbox remains locked on to that initial value.

Also I've been adjusting the

if (i > 0) {
mybox.value += ", ";
}

statement to try to replace the , and space with a line break - haven't figuered that out yet.

Rob

Abhishek Reddy posted this at 09:28 — 18th December 2004.

He has: 3,348 posts

Joined: Jul 2001

Sorry, I couldn't get access to IE until now. Using IE 6.0 the script works fine for me, as it did on Firefox. If anything, your IE probably doesn't like document.getElementById, in which case you'd want to integrate a browser detection script with it, like this:

- get browser_detect.js from dithered.com. It's a comprehensive browser sniffing script. Place the .js file where you like and make sure you use the right path in the code below.

<html>
<head>
  <title></title>


  <!-- *** this is the browser detection script; use appropriate path *** -->
  &lt;script type="text/javascript" src="browser_detect.js"&gt;&lt;/script&gt;


  &lt;script type="text/javascript"&gt;

    function init() {
      /* Use this function to initialise variables after
         the page has loaded (onload, called from <body>).
      */

      if (browser.isIECompatible) {
        mybox = document.all.staffTextBox;
      } else if (browser.isNSCompatible) {
        mybox = document.getElementById("staffTextBox");
      } else {
        mybox = document.staffTextBox;
      }

      /* Shortcut to the textarea which we use later.
         The DOM selector for this is decided based on
         what browser_detect.js detects to be the browser.
      */
      
      staffName = new Array()
      staffName[0] = "Joe";
      staffName[1] = "Dave";
      staffName[2] = "Alison";
      staffName[3] = "Paula";
      staffName[4] = "Brad";
      staffName[5] = "Jerry";
      staffName[6] = "Amy";
      staffName[7] = "Karen";
    }

    function addStaff(staffGiven) {
      /* This is the function that is triggered when
         a link is clicked to view staff.
         Again, this is more portable and easier to
         code for in the html.
         
         USAGE: <a href="#" onclick="addStaff ('{staff_id_1}, {staff_id_2}, {staff_id_n}, ...')">Click</a>
      */
      
      mybox.value = "";
      /* Clear the box of any previous values, in case
         this is not the first time content will be added.
      */
         
      staffGiven = staffGiven.split(",");
      /* Split the supplied string (see USAGE note above)
         by its comma delimiters into an array that we
         can process.
      */
      
      for (i=0; i < staffGiven.length; i++) {
        /* loop through the array */
        
        if (i > 0) {        
          mybox.value += ", ";
        }
        /* If this is not the first name (and it is naturally
           not the last name -- see the for() conditions),
           add a comma for presentation.
        */

      
        mybox.value += staffName[staffGiven[i]];
        /* Update the box's content, adding the matches.
        */
      }
    }
  &lt;/script&gt;

</head>

<body onload="init()">

	<a href="#" onClick="addStaff('1')";>
	Staff in charge of billing
	</a>
<br />
	<a href="#" onClick="addStaff('3,4')";>
	Staff in charge of press releases
</a>
<br />

<!-- suggestion 1 -->

	<a href="#" onClick="addStaff('6,2,1,5,7')";>
	Staff in charge of billing
	</a>

<br />

	<a href="#" onClick="addStaff('7,2')";>
	Staff in charge of other stuff
	</a>

<br />

	<a href="#" onClick="addStaff('5,7,4')";>
	Staff in charge of press releases
	</a>
<br />

	<form name="staffBox">
	<textarea rows="8" cols="25" name="textHere" readonly="readonly" id="staffTextBox"></textarea>
	</form>

</body>

</html>

rjmjrLPCS posted this at 18:29 — 4th January 2005.

He has: 5 posts

Joined: Dec 2004

Thanks for the help!