Ajax/php - Keeps selecting first item from form; ignores the rest

[brokaddr]

I am trying to use Ajax to automatically update a small portion of checkboxes.
I was able to get the script to update the FIRST field only, but if there are 2 or 3, no matter what I click.. the first is what gets updated.
What am I doing wrong?

Javascript placed before </head>:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
<?php for ($i=0, $n=sizeof($order->products); $i<$n; $i++) {//set the arrays 
?>
var prid = document.getElementById('prid<?php echo '['.$i.']';?>').value;
var stock = document.getElementById('stock<?php echo '['.$i.']';?>').value;
<?php //end arrays
}
?>
var queryString = "?prid=" + prid + "&stock=" + stock;
ajaxRequest.open("GET", "ajax_product.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

The form:

for ($i=0, $n=sizeof($order->products); $i<$n; $i++) {
echo'<form id="ajaxupdate" name="ajaxupdate">
<input type="checkbox" id="prid['.$i.']" name="prid['.$i.']" value="'.$order->products[$i]['orders_products_id'].'" onclick="ajaxFunction()">
<input type="hidden" id="stock['.$i.']" value="'.$order->products[$i]['stock_marked'].'">
<input type="hidden" id="pname['.$i.']" name="pname" value="'.$order->products[$i]['products_name'].'">
</form>';
}

[Fotiman]

First, start by examining the OUTPUT of your page rather than the PHP code. Do View > Source on your page. I suspect you'll see multiple checkboxes with the same id value because you're generating multiple forms, each that then loops through $order->products to output the checkbox with id "prid[n]" (where n is the index in the loop).

[brokaddr]

I can't see anything with the same ID?

Javascript from before </head>:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var prid = document.getElementById('prid[0]').value;
var stock = document.getElementById('stock[0]').value;
var prid = document.getElementById('prid[1]').value;
var stock = document.getElementById('stock[1]').value;
var prid = document.getElementById('prid[2]').value;
var stock = document.getElementById('stock[2]').value;
var prid = document.getElementById('prid[3]').value;
var stock = document.getElementById('stock[3]').value;
var prid = document.getElementById('prid[4]').value;
var stock = document.getElementById('stock[4]').value;
var queryString = "?prid=" + prid + "&stock=" + stock;
ajaxRequest.open("GET", "ajax_product.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

Checkboxes:

<form id="ajaxupdate" name="ajaxupdate">
<input id="prid[0]" name="prid[0]" value="148856" onclick="ajaxFunction()" type="checkbox">
<input id="stock[0]" value="0" type="hidden">
<input id="pname[0]" name="pname" value="" type="hidden">
</form>
<input name="products_purchased148857" value="1" type="hidden">
<div class="display[1]">
<form id="ajaxupdate" name="ajaxupdate">
<input id="prid[1]" name="prid[1]" value="148857" onclick="ajaxFunction()" type="checkbox">
<input id="stock[1]" value="0" type="hidden">
<input id="pname[1]" name="pname" value="" type="hidden">
</form>
<input name="products_purchased148858" value="1" type="hidden"><div class="display[2]">
</form>
<form id="ajaxupdate" name="ajaxupdate">
<input id="prid[2]" name="prid[2]" value="148858" onclick="ajaxFunction()" type="checkbox">
<input id="stock[2]" value="2" type="hidden">
<input id="pname[2]" name="pname" value="" type="hidden">
</form>

...etc

[Fotiman]

Ah, you are right. However, I was close. Look at this bit of code:

<?php for ($i=0, $n=sizeof($order->products); $i<$n; $i++) {//set the arrays 
?>
var prid = document.getElementById('prid<?php echo '['.$i.']';?>').value;
var stock = document.getElementById('stock<?php echo '['.$i.']';?>').value;
<?php //end arrays
}
?>

And what it outputs:

  var prid = document.getElementById('prid[0]').value;
  var stock = document.getElementById('stock[0]').value;
  var prid = document.getElementById('prid[1]').value;
  var stock = document.getElementById('stock[1]').value;
  var prid = document.getElementById('prid[2]').value;
  var stock = document.getElementById('stock[2]').value;
  var prid = document.getElementById('prid[3]').value;
  var stock = document.getElementById('stock[3]').value;
  var prid = document.getElementById('prid[4]').value;
  var stock = document.getElementById('stock[4]').value;

See the problem there? :)

[brokaddr]

Ah!

I updated the code:

var prid[0] = document.getElementById('prid[0]').value;
var stock[0] = document.getElementById('stock[0]').value;
var prid[1] = document.getElementById('prid[1]').value;
var stock[1] = document.getElementById('stock[1]').value;
var queryString = "?prid[]=" + prid[] + "&stock[]=" + stock[];
ajaxRequest.open("GET", "ajax_product.php" + queryString, true);
ajaxRequest.send(null); 

Firefox error console gives me errors before I even attempt to run the script:

Error: missing ; before statement
Source File: script.php
Line: 53, Column: 5
Source Code:
var prid[0] = document.getElementById('prid[0]').value;

There is an arrow pointing around the "p" from var prid[0]

Not sure why it wants a ; at the beginning of the statement.

[Fotiman]

Lets look at what you're doing:

var prid[0] = document.getElementById('prid[0]').value;
var prid[1] = document.getElementById('prid[1]').value;

In that code, you've declared variable "prid" (which is an array) twice! Instead, you need to do something more like this:

var prid = [];
prid[0] = document.getElementById('prid[0]').value;
prid[1] = document.getElementById('prid[1]').value;

[brokaddr]

Thanks for the tip.

Still getting a similar error with those changes:

Error: syntax error
Source File: script.php
Line: 59, Column: 37
Source Code:
var queryString = "?prid[]=" + prid[] + "&stock[]=" + stock[];

The arrow is pointing at the [] from +prid[]


Modified code:

  var prid = [];
  var stock = [];
prid[0] = document.getElementById('prid[0]').value;
stock[0] = document.getElementById('stock[0]').value;
prid[1] = document.getElementById('prid[1]').value;
stock[1] = document.getElementById('stock[1]').value;
var queryString = "?prid[]=" + prid[] + "&stock[]=" + stock[];
ajaxRequest.open("GET", "ajax_product.php" + queryString, true);
ajaxRequest.send(null);

[Fotiman]

Try this (note, you should first encode the values in the arrays:.

var i;
for (i = 0; i < prid.length; i++) {
  prid[i] = escapeURIComponent(prid[i]);
}
for (i = 0; i < stock.length; i++) {
  stock[i] = escapeURIComponent(stock[i]);
}
var queryString = "?prid[]=" + prid + "&stock[]=" + stock;

[brokaddr]

I believe I have finally bypassed the javascript errors. :)

Now, what can I do to pass the array into the datbase?

I've tried:

for ($i=0, $n=sizeof($order->products); $i<$n; $i++) {//set the arrays 
//get id
$pid = (int)$_POST['prid']['.$i.'];
}

MySQL command:

$qry_result = mysql_query("UPDATE orders_products SET products_stock_detail ='1' where orders_products_id='".$pid."'") or die(mysql_error());

No luck.

[brokaddr]

Can't edit my post.

I seem to be capturing all of the arrays, not just the ones i have ticked:

result of $_GET:

ajax_product.php?prid[]=149024,149025,149026

For this particular test, I put a checkbox in 149025. Is there any way to register only the checkbox I ticked on?