Javascript function not being called from onchange (not always) - php

Question

At the moment, I'm in the process of creating a website, where I have some products which have a quantity. This quantity depends on a size and color.
So I came up with the following procedure to check and give feedback about how many there are still left.
<div class="product_stock" id="stock_form<?php echo $i; ?>"><?php
$size = $product_sizes[0];
$color = $product_colors[0];
$sql = "SELECT * FROM products WHERE product_id = '$product_id' AND size = '$size' AND color = '$color'";
$result = mysql_query($sql) or die(mysql_error());
echo $sql;
if(mysql_num_rows($result) > 0) {
$product_stock = mysql_fetch_array($result);
if($product_stock['stock'] > 0) {
echo "Nog ".$product_stock['stock']." verkrijgbaar";
} else {
echo "Combinatie is niet meer verkrijgbaar";
}
}?>
</div>
<div class="product_text">
<?php echo $product['text']; ?>
</div>
<div class="product_num">
art: #<?php echo $product['product_id']; ?>
</div>
<div class="product_bar_bot">
<form name="form<?php echo $i; ?>" action="shopping_cart.php?">
<input type="hidden" name="id" value="<?php echo $product['pid']; ?>"/>
<select name="size" class="product_select" onChange="get_stock('form<?php echo $i; ?>');">
<?php foreach($product_sizes as $p_size) { ?>
<option>
<?php echo $p_size; ?>
</option>
<?php } ?>
</select>
<select name="color" class="product_select" onChange="get_stock('form<?php echo $i; ?>');">
<?php foreach($product_colors as $p_color) { ?>
<option value="<?php echo $p_color; ?>">
<?php echo $color_array[$p_color]; ?>
</option>
<?php } ?>
</select>
<input type="hidden" name="url" value="sale">
<input type="hidden" name="action" value="add">
<input type="text" name="amount" value="1" size="1" style="vertical-align: top; margin-top: 9px;"></input>
<img src="images/icons/cart_shop.png" align="top"/>
<input type="submit" class="button" value="Voeg toe" style="vertical-align: top; margin-top: 7px;">
The function that is required to be called:
function get_stock(formid) {
var form = document.forms[formid];
var size = form.size.value;
var color = form.color.value;
var pid = form.id.value;
var stock = 'stock_'+formid;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(stock).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_stock.php?id="+pid+"&size="+size+"&color="+color,true);
xmlhttp.send();
}
The problem I'm having is that it does work for some of the forms, but for some forms the get_stock.php page isn't even being called.
If more information is needed don't hesitate to ask.

Answer 1

I made a small error that I already fixed, thanks to #Bergi's comment. I was creating the forms by adding +1 at $i each time, but I reseted $i at the wrong place, which resulted in more then one of $i = 1 for example.