JavaScript will always bewilder me...

Anon

Hello all!

I have a javascript function that takes multiple values selected from a select box (HTML form), formats them with commas between selected values, so the values can be stored for later use.

Here's the function and select box, ill explain more once you've seen it:

this is in the head of the html document...

<SCRIPT LANGUAGE="JavaScript">
<!--
function setHobbiesList() {
var srcList = window.document.forms[0].srcList;
var hobbiesList = window.document.forms[0].hobbiesList;

hobbiesList.value = "";
for(var i=0; i < srcList.length; i++) {
	if(srcList.options[i].selected) {
		if(hobbiesList.value != "")
			hobbiesList.value = hobbiesList.value + ", " + srcList.options[i].text;
		else
			hobbiesList.value = srcList.options[i].text;
	}
}

}
// -->
</SCRIPT>

... and the select box within the form:

  <select size="6" name="srcList" onChange=setHobbiesList() multiple>\n";
    <option value="Biking">Biking<br>
    <option value="Bowling">Bowling<br>
    <option value="Cooking">Cooking<br>
    <option value="Dancing">Dancing<br>
    <option value="Golf">Golf<br>
    <option value="Sailing">Sailing<br>
    <option value="Skating">Skating<br>
    <option value="Surfing">Surfing
    <option value="Theatre">Theatre
    <option value="Other">Other
  </select>

The select box suplies the values for srcList, which when any value is selected, they are formatted and thrown in to the valuable hobbiesList...
This SHOULD work, but when the for is submitted, hobbbiesList has no value...

Any ideas?

Thank you in advance to anyone that takes a stab at this...

John

jordanj

John...

From the example that you have provided here, there is not "input" for hobbiesList..

Is this supposed to be another select box, or what?

Anon

here you go:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setHobbiesList() {
var srcList = window.document.forms[0].srcList;
var hobbiesList;

hobbiesList = "";
alert (hobbiesList);
for(var i=0; i < srcList.length; i++) {
if(srcList.options.selected) {
if(hobbiesList != "")
hobbiesList = hobbiesList + ", " + srcList.options.text;
else
hobbiesList = srcList.options.text;
alert(hobbiesList);
}
}
}
// -->
</SCRIPT>
</head>
<body>
<form>
<select size="6" name="srcList" multiple>\n";
<option value="Biking">Biking<br>
<option value="Bowling">Bowling<br>
<option value="Cooking">Cooking<br>
<option value="Dancing">Dancing<br>
<option value="Golf">Golf<br>
<option value="Sailing">Sailing<br>
<option value="Skating">Skating<br>
<option value="Surfing">Surfing
<option value="Theatre">Theatre
<option value="Other">Other
</select>
<input type="submit" value="Submit" onClick="setHobbiesList()">
</form>
</body>

jan-mike ^_

Anon

mike,

I appreciate your help a great deal, and would like to ask for a small bit of extra help on this same problem. I implemented the alerts, and the data was being formatted corretly, but the variable was not being passed beyond the javascript function.

I tried making a hidden field within the form with the values of the hobbiesList variable, and that remained empty.
I'm thinking that I need to make hobbiesList a global variable, but I am not sure as to how I would do that.
If you could take a second look, the code I am using is below.

Again, I really appreciate your help.

Thanks man,
John

<SCRIPT LANGUAGE="JavaScript">
<!--
function setHobbiesList() {
var srcList = window.document.forms[0].srcList;
var hobbiesList = window.document.forms[0].hobbiesList;

  <select size="6" name="srcList" onChange="setHobbiesList()" multiple>\n";
    <option value="Biking">Biking<br>
    <option value="Bowling">Bowling<br>
    <option value="Cooking">Cooking<br>
    <option value="Dancing">Dancing<br>
    <option value="Golf">Golf<br>
    <option value="Sailing">Sailing<br>
    <option value="Skating">Skating<br>
    <option value="Surfing">Surfing<br>
    <option value="Theatre">Theatre<br>
    <option value="Other">Other<br>
  </select>

Anon

No problem. Hopefully you can also help me in the future. So its just give and take

here you go. You may want to convert the text field to a hidden field once you are done.

jm ^_

<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setHobbiesList() {
var srcList = window.document.forms[0].srcList;
var hobbiesList = window.document.forms[0].hobbiesList;

hobbiesList = "";
for(var i=0; i < srcList.length; i++) {
if(srcList.options.selected) {
if(hobbiesList != "")
hobbiesList = hobbiesList + ", " + srcList.options.text;
else
hobbiesList = srcList.options.text;
}
}
//alert(hobbiesList);
return (hobbiesList);
}
// -->
</SCRIPT>
</head>
<body>
<form name="johnson">
<select size="6" name="srcList" onChange="document.johnson.rick.value = setHobbiesList()" multiple>\n";
<option value="Biking">Biking<br>
<option value="Bowling">Bowling<br>
<option value="Cooking">Cooking<br>
<option value="Dancing">Dancing<br>
<option value="Golf">Golf<br>
<option value="Sailing">Sailing<br>
<option value="Skating">Skating<br>
<option value="Surfing">Surfing<br>
<option value="Theatre">Theatre<br>
<option value="Other">Other<br>
</select>
<input type="text" name="rick" value="">
</form>

Anon

Allright, I found some probelms in the code and fixed them, but theres one problem remaining... a new problem.

When you let go of the ctrl key in the select box, and select a single item (thus de-selecting everything else), the values aren't removed from hobbiesList...

The code is listed below, and again, thank you for your help
John

<SCRIPT LANGUAGE="JavaScript">
<!--
function setHobbiesList() {
var srcList = window.document.forms[0].srcList;
var hobbiesList = document.forms[0].hobbiesList;

for(var i=0; i < srcList.length; i++) {
if(srcList.options.selected) {
if(hobbiesList.value == "")
hobbiesList.value = srcList.options.text;

else
hobbiesList.value = hobbiesList.value + ", " + srcList.options.text;
}
}
return(hobbiesList.value);
}
// -->
</SCRIPT>

<select size="6" name="srcList" onChange="setHobbiesList()" multiple>\n";
<option value="poo">Poo
<option value="work">dammit
</select>
<input type="text" name="hobbiesList">
this is just so I can see the values as they're entered - it does werk.

Anon

we're using the event handler onChange(); so theoretically it means "on the Change of this select box" do something. And since we only care about the results after they've hit the SUBMIT button then we will only need to store what they have in the select box at the moment they hit SUBMIT.

In other words, we don't care what they do and what hobbiesList contains if they were just messing around with the form. The real value is after they hit submit.

The trick then is resetting the hobbiesList when the page loads or right a wrapper for it and make it a helper function. The only time you won't reset is if there is a previous value and that previous value is part of what is currently selected

so the trick is to check for occurrences that occur in the array of results

lets run through the algorithm together. for example: (i'm using pseudo-code for purposes of this discussion)
<option value="1">1
<option value="2">2
<option value="3">3

if I CTRL-selected 1, 2, 3 then hobbiesList should have 1, 2, 3 right?

// set up array, array should contain available options. If its possible set up an associative array such that array["option"] = value; sort of like a hash.
var array = array();
is 1 selected? yes. is it in array? no. add to array.
is 2 selected? yes. is it in array? no. add to array.
is 3 selected? yes. is it in array? no. add to array.
return array

now let say i'm the indecisive type and I change my mind all the time. so this time I hit 1, thus clearing 2, 3 then I go into my function and check

is 1 selected? yes. is it in array? yes. do nothing.
is 2 selected? no. is it in array? yes. remove from array.
is 3 selected? no. is it in array? yes. remove from array.
return array

so what happens if i change my mind again, maybe i'm really just bored, and I decided that I like 1 AND also 3 so I call my function again and do the following:

is 1 selected? yes. is it in array? yes. do nothing
is 2 selected? no. is it in array? no. do nothing
is 3 selected? yes. is it in array? no. add to array
return array

so now the trick is storing the results in an array and once the user hits submit
the array contents is dumped into a hidden field and the hidden field is then passed into your PHP function and you can parse it using explode();

that took a lot of thinking so I didn't have time to write the code. i hope that helps.

good luck my friend.

jm ^_