PHP \ MySQL \ AJAX - 동적 필드

Question

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>"; 
}  
} 
?> 

자바 스크립트 코드

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가 있어야합니다.

자바 스크립트 라인 :

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 등과 같이 만들 필요가 있습니다. 그런 다음 통화에서 증분 값을 updatescore()으로 참조해야합니다.

당신은이 같은 시도 할 수 있습니다 : 당신이 잘 다음과 같은 getElementById 선택기에 증가 값을 추가하기 위해 자바 스크립트를 수정해야

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

참고 : 마지막으로

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

을, 당신은 필요 ajax 호출에 행 id 값을 추가하여 업데이트 할 DB 행을 알 수 있습니다.

증분 변수 인 $i 증분 변수보다 데이터베이스의 행 ID (해당 테이블에 자동 증가 값이있는 경우)를 사용하는 것이 더 나을 수도 있습니다.이 방법을 사용하면 직접 묶는 방법이 생깁니다 각 HTML 행은 자바 스크립트를 통해 AJAX 호출에 전달됩니다.