Array of ,select. fields with JavaScript

[SeanF]

I am trying to set up a form with an array of <select> fields which, using "onchange", JavaScript and Ajax will update a MySQL database when an item is selected. The problem I am having is that the "ID" being passed to javascript is always the last of the array:

The array is created by two nested "while" loops. The first assigns a company_id and for each company_id a second "while" loop assigns one or more "event_id"s. Each of these company/event pairs has an associated <select> field.

The <select> field is constructed like this (within a nested loop):

$prospect_array = array($company_id,$event_id,'');
$prosp = json_encode($prospect_array);
$sel_id = 'cat'.$company_id.'-'.$event_id;
// echo "Sel ID: $sel_id<br/>";
echo "<td align = 'left'> 
<select name = 'category_select[$company_id,$event_id]' id='$sel_id' onchange='CategorySelected($prosp)'>
<option value = $prosp> -- </option>
";

Then, loop for each "$prosp" option:

echo "<option value= $prosp $selected> $category</option>";

As an initial test, my JavaScript, "CategorySelected", looks like this:

<script type='text/javascript'>
function CategorySelected(){
alert('Change was made');
alert($prosp);
var choice = document.getElementById('$sel_id').value;
alert(choice);
}
</script>

As mentioned, the "alerts" coming from the JavaScript show the same values for all <select> fields in the array and that value is always the very last item of the multidimensional array.

If I uncomment the "// echo 'Sel ID: $sel_id<br/>';" line, the correct values scroll up the screen.

I am sure it's a syntax error somewhere, I am just not seeing it.

Any advice would be greatly appreciated.

[robzilla]

It's a bit difficult to tell without seeing some of the HTML output generated by the script.

However, if you define $sel_id and $prosp in a loop, when the loop is finished their values will be equal to those stored in the last run. So if you echo that javascript code after the loops, it would make sense that the last stored values of $prosp and $sel_id would be used and result in the same data being alerted regardless of what option you select.

What I'm assuming you want is for the actual value of the selected option to be alerted. Wouldn't onchange='CategorySelected(this.value)' make more sense then?

(Using event listeners would save you quite a bit of redundant code here.)

[NickMNS]

Your problem is here:

onchange='CategorySelected($prosp)'

and here:

function CategorySelected()

Your function call is including a parameter but your function definition doesn't define one.

You do need to pass anything to it. The in-line function call already sends the event object to the function.

onchange='CategorySelected()'

function CategorySelected() {
 var choice = event.target.value;
 alert(choice);
}

This makes everything much simpler as you can re-use this function without needing to pass it any variables, so essentially you do not need the ID ($sel_id) variable.
Here is a quick demo:
[jsfiddle.net...]

[SeanF]

Thanks for the reply... (should have responded sooner).

Yes... that clears things up considerably... couldn't see the forest for the trees!