0

JavaScript 関数にさまざまな変数を渡すのに問題があります。ここに行きます：

基本的にデータ行を構築する PHP コードがあります。私がやりたいことは、AJAX 呼び出しを介して各行を個別に保存することです。これが私がこれまでに持っているものです。何が起こっているかというと、最初の行は正常に機能しますが、後続の行はすべて機能しません (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();
}
4

1 に答える 1

0

さて、あなたの問題は、同じ 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を持つ最初の要素のみを自動的に選択します。したがって、各ループ反復で presenta1、presenta2 などのインクリメント ID を作成する必要があります。次に、への呼び出しでインクリメント値を参照する必要があります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++;
}

getElementById次のように、JavaScript を変更してセレクターに増分値を追加する必要があることに注意してください。

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

最後に、更新する DB 内の行がわかるように、行 ID 値を ajax 呼び出しに追加する必要があります。

私が示しているインクリメント変数よりも、データベースの行 ID を使用した方が (そのテーブルに自動インクリメント値がある場合)、より良いサービスが得られるかもしれません。$iこれにより、各 HTML 行をJavaScript を介した AJAX 呼び出し。

于 2012-09-06T15:03:20.407 に答える