Question

I’m having trouble passing different variables to my javascript function. Here goes:

I have PHP code that basically builds out rows of data. What I want to do is being to save each row separately via an AJAX call. Here’s what I have so far. What is happening is that the first row works fine, but all the subsequent rows do not (the javascript variables are the ones from the first row).

FRONT END PHP CODE

 <?php 
  $result = mysql_query("SELECT * FROM scoresheet WHERE matchup_id = '$matchupid' AND   team_id = '$teama' AND status = '1' "); 
  $num_rows = mysql_num_rows($result);
  if ( mysql_num_rows($result) == 0 ) { echo "<div style='float:left;clear:both;'>Nothing found</div>"; } else {
while($row = mysql_fetch_array($result)) 
{
echo "  <form name='input'>";    
echo "  <div class='tablecell'>".$row['full_name']."</div>";
echo "  <div class='tablecell'>".$row['scoresheet_id']."</div>";
echo "  <input type='hidden' id='scoresheet_id' name='scoresheet_id' value='".$row['scoresheet_id']."'></input>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='presenta' name='presenta' value='".$row['present']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='sparea' name='sparea' value='".$row['spare']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='goaliea' name='goaliea' value='".$row['goalie']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='goalsa' name='goalsa' value='".$row['goals']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='assistsa' name='assistsa' value='".$row['assists']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='yellowa' name='yellowa' value='".$row['yellow']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='reda' name='reda' value='".$row['red']."'></input></div>";
echo "  <input type='button' class='btnInput'  style='float:left;margin-top:-2px;' onClick='updatescore()' value='Save'></input>";
}    
}
?>

JAVASCRIPT CODE

function updatescore() {
    var presenta = document.getElementById('presenta').value;
    var sparea = document.getElementById('sparea').value;
    var goaliea = document.getElementById('goaliea').value;
    var scoresheet_id = document.getElementById('scoresheet_id').value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtuser").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "testajax-x.php?presenta="+presenta+"&sparea="+sparea+"&goaliea="+goaliea+"&scoresheet_id="+scoresheet_id, true);
    xmlhttp.send();
}

Answer 1

Well, your problem is that you are going to be echoing out a bunch of forms with the same ID’s For this to work properly, each input item must have it’s own ID.

Your javascript lines:

var presenta = document.getElementById('presenta').value;
var sparea = document.getElementById('sparea').value;
var goaliea = document.getElementById('goaliea').value;
var scoresheet_id = document.getElementById('scoresheet_id').value;

Are automatically going to only select the FIRST elements with those id’s that they come across. So you need to make the increment id’s like presenta1, presenta2, etc. on each loop iteration. And then you need to reference the increment value in your call to updatescore().

You might try something like this:

$i=1;
while($row = mysql_fetch_array($result)) 
{
echo "  <form name='input'>";    
echo "  <div class='tablecell'>".$row['full_name']."</div>";
echo "  <div class='tablecell'>".$row['scoresheet_id']."</div>";
echo "  <input type='hidden' id='scoresheet_id' name='scoresheet_id' value='".$row['scoresheet_id']."'></input>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='presenta{$i}' name='presenta' value='".$row['present']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='sparea{$i}' name='sparea' value='".$row['spare']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='goaliea{$i}' name='goaliea' value='".$row['goalie']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='goalsa{$i}' name='goalsa' value='".$row['goals']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='assistsa{$i}' name='assistsa' value='".$row['assists']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='yellowa{$i}' name='yellowa' value='".$row['yellow']."'></input></div>";
echo "  <div class='labelAnswer'><input class='standardscore' type='textfield' id='reda{$i}' name='reda' value='".$row['red']."'></input></div>";
echo "  <input type='button' class='btnInput'  style='float:left;margin-top:-2px;' onClick='updatescore({$i})' value='Save'></input>";
$i++;
}

Note you well then need to modify your javascript to add the increment value to the getElementById selectors like:

function updatescore(id) {
    var presenta = document.getElementById('present'+id).value;
    // and so on.

Finally, you would need to add the row id value to the ajax call so that you know which row in the DB to update.

You might even be better served using the row id from the database (if you have like an autoincrement value on that table) than the $i increment variable I am showing, in that this would give you a direct way to tie back each HTML row to the AJAX call via the javascript.