Dynamically Fill TextArea From Multiple Select

[JustinK101]

Hello All,

I need to do something a little funky:

I have a form element multiple select:

<select name="vehicles[]" id="vehicles" size="' . $size . '" multiple onChange="updateServiceInstructions();">

I also have a form element textarea:

<textarea name="vehicle_instructions" cols="108" rows="6" dir="ltr" lang="en">

I need to figure out some JS code when ever a row is selected in vehicles[] it needs to get the value/text of that entire row and put it in the vehicles_instructions textarea and then append three newlines. Then if the user selects another vehicle the same action occurs with that row put into the textarea with three newlines.

Then if a row is deselected it would be nice, but not required if impossible, to delete the row in the textarea and clean up the newlines.

I have started by setting the event handler in the select but other than that I have no idea.

function updateServiceInstructions()
{



}

Thanks for any help.

- Justin

 

[BillyRayPreachersSon]

The first thing you should do is remove the "[]" from the select element name ("[" and "]" are not legal characters for element names, and cause huge problems when trying to address elements using scripting). If you need them to be there for a reason (probably PHP), then you should find another way around that problem, rather than using bad coding practices.

Moving on to the next part, you simply need to loop around all the options for the select element. Something like this:

<select ... onChange="updateServiceInstructions([!]this[/!]);">

...

function updateServiceInstructions(selObj) {
   var txtArea = selObj.form.elements['vehicle_instructions'];
   txtArea.value = '';

   for (var loop=0; loop<selObj.options.length; loop++) {
      if (selObj.options[loop].selected) {
         txtArea.value += selObj.options[loop].text + '\n\n\n';
      }
   }
}

Note 1: You said that you wanted to "get the value/text of that entire row". I didn't know whether that meant "value or text", or "value and text". I've assumed the former, and simply used the text... but I'm sure you can easily modify what I've given you if that's wrong.

Note 2: I've assumed that the textarea is in the same form as the select element (we don't know because you've not shown us all the code). If it is not, you'll have to modify my code to fix this.

Note 3: I've not tested this code.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JustinK101]

Hey Dan,

Thanks for the responce. I will your code a try.

The brackets in the name of the select indicate that it's an array of elements. This is the only solution I know of to properly store multiple selections. It was acutally posted on PHPfreaks as well, on how to parse multiple select items.

 

[BillyRayPreachersSon]

Well - you can't say you weren't warned! You really should find another way around this.

Personally I find it pretty crappy that PHP coders worry more about back-end code that no-one will ever see, than front-end code which can be validated - and in your case, fail miserably.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JustinK101]

Dan,

I could be wrong here, but I am farily sure the technique of using the brackets is the correct approach. If you would like to enlighten me, please do so.

 

[JustinK101]

In fact reading, this is the correct approach. You have to use the brackets so it treats the results as an array, which then you parse in php/asp etc.

 

[BillyRayPreachersSon]

It may well be the approach that PHP users choose to use, but it's not valid as far as the HTML specs go. Here's the enlightenment you seek:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

As you can see - there's no mention of either "[" or "]" being a valid character.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]