PHP \\ MySQL \\ AJAX-動態字段

Question

我在將不同的變量傳遞給javascript函數時遇到麻煩。 開始：

我有基本上可以構建數據行的PHP代碼。 我要做的是通過AJAX調用分別保存每一行。 到目前為止，這就是我所擁有的。 發生的情況是第一行工作正常，但隨后的所有行均不工作（javascript變量是第一行中的javascript變量）。

前端PHP代碼

 <?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代碼

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

好吧，您的問題是，您將回顯一堆具有相同ID的表單。為了使此表單正常工作，每個輸入項都必須具有自己的ID。

您的javascript行：

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;

會自動選擇遇到其ID的FIRST元素。 因此，您需要在每次循環迭代中使增量id像presenta1，presenta2等。 然后，您需要在調用updatescore()引用增量值。

您可以嘗試如下操作：

$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++;
}

請注意，然后您需要修改JavaScript，以getElementById量值添加到getElementById選擇器中，例如：

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

最后，您需要將行ID值添加到ajax調用中，以便您知道要更新數據庫中的哪一行。

與我顯示的$i增量變量相比，使用數據庫中的行ID（如果您在該表上具有自動增量值）甚至可能會得到更好的服務，因為這將為您提供直接綁定每個HTML行的方式通過javascript轉到AJAX調用。