php와 javascript를 사용하여 동적으로 생성 된 변수의 수를 늘리려면 어떻게해야합니까?

Question

동적으로 생성되는 여러 텍스트 상자가 있습니다. 상자의 수는 매번 다를 수 있습니다. 자바 스크립트 (box1, box2 등)에서 생성 된 변수의 수를 백엔드의 테이블에서 호출 된 행 수와 어떻게 일치 시키나요? 예 : $ query의 결과로 2 행만 있으면 두 개의 자바 스크립트 변수 (box1 및 box2) 만 있어야합니다. 동시에 올바른 번호에 해당하는 올바른 URL을 동적으로 생성하려면 어떻게해야합니까?

$query = "SELECT * FROM `sessionid` WHERE `sessionid` = '$session' "; 
$result = mysql_query($query) or die(mysql_error()); 
echo '<table class="table"><tbody>'; 
$subtotal = 0; 
$i=1; 
while($row = mysql_fetch_assoc($result)) { 
    echo '<tr><td></td><td><h3>' . $row['title'] . '</h3></td><td>' . $row['options'] . '</td><td><div class="span3 offset1"><input type="text" id="box' . $i . '"value="' . $row['qt'] . '" class="span1"> <input type="button" class="btn" value = "Refresh" onclick="ajaxFunction()" /> <h4> $' . $row['price'] . '<div id="ajaxDiv">Your result will display here</div></h4></td></tr>'; 
    $i++; 
    $prodtotal= $row['qt'] * $row['price']; 
    $subtotal= round($subtotal+ $prodtotal, 2); 
    $_SESSION['subtotal']=$subtotal; 
} 

echo '</form></tbody></table>'; 

//javascript later on 
var box1 = document.getElementById('box1').value; 
var box2 = document.getElementById('box2').value; 
var box3 = document.getElementById('box3').value; 
var box4 = document.getElementById('box4').value; 
var queryString = "?box1=" + box1 + "&box2=" + box2 + "&box3=" + box3 + "&box4=" + box4; 

Answer 1

자바 스크립트에서 상자 값 배열을 수집 할 수 있습니다 (예 : 당신이 ID 'box6'와 다른 페이지 요소를 가지고 테이블이 'box5'에서 끝나는 경우

var boxValues = new Array(); 
var i = 1; 
while (document.getElementById('box' + i) !== undefined) { 
    var box = document.getElementById('box' + i); 
    boxValues[i] = box.value; 
    i++; 
} 
var queryString = '?'; 
for(i = 1; i < boxValues.length; i++) { 
    queryString += 'box' + i + '=' + boxValues[i] + '&'; 
} 
queryString = queryString.slice(0, -1); // eat the last '&' 

이 방법을 제외하고 (당신의 JS에서 의심스러운 비교를 PHP를 포함 할 필요가없는 장점이 있습니다, 예를 들어, 당신은 얻을 것이다 펑키 결과). 물론 쿼리 문자열을 작성하는 것 이외의 다른 값에 대한 참조가 필요하지 않은 경우 값을 반복하면서 문자열을 작성하고 배열에 저장하지 않고 건너 뛸 수 있습니다 (예 :

var i = 1; 
var queryString = '?'; 
while (document.getElementById('box' + i) !== undefined) { 
    var boxValue = document.getElementById('box' + i).value; 
    queryString += 'box' + i + '=' + boxValue + '&'; 
    i++; 
} 
queryString = queryString.slice(0, -1); // eat the last '&' 

Answer 2

결과를 통과하는 루프의 일부로 JavaScript를 출력해야합니다. 같은에

 while($row = mysql_fetch_assoc($result)) { 
       echo '<tr><td></td><td><h3>' . $row['title'] . '</h3></td><td>' . $row['options'] . '</td><td><div class="span3 offset1"><input type="text" id="box' . $i . '"value="' . $row['qt'] . '" class="span1"> <input type="button" class="btn" value = "Refresh" onclick="ajaxFunction()" /> <h4> $' . $row['price'] . '<div id="ajaxDiv">Your result will display here</div></h4></td></tr>'; 
       $i++; 
       $prodtotal= $row['qt'] * $row['price']; 
       $subtotal= round($subtotal+ $prodtotal, 2); 
       $_SESSION['subtotal']=$subtotal; 
       } 

:

$str = ''; 
while($row = mysql_fetch_assoc($result)) { 
     echo '<tr><td></td><td><h3>' . $row['title'] . '</h3></td><td>' . $row['options'] . '</td><td><div class="span3 offset1"><input type="text" id="box' . $i . '"value="' . $row['qt'] . '" class="span1"> <input type="button" class="btn" value = "Refresh" onclick="ajaxFunction()" /> <h4> $' . $row['price'] . '<div id="ajaxDiv">Your result will display here</div></h4></td></tr>'; 

$str .= 'var box'.$i.' = document.getElementById("box'.$i.'").value;'.PHP_EOL; 

     $i++; 
     $prodtotal= $row['qt'] * $row['price']; 
     $subtotal= round($subtotal+ $prodtotal, 2); 
     $_SESSION['subtotal']=$subtotal; 
    } 

를 그리고 자바 스크립트가 어디에 ...

echo $str; 

Answer 3

내 제안 : 따라서이 변경 것

1. PHP와 자바 스크립트

PHP :

$cnt = 0; 
while($row = mysql_fetch_assoc($result)) { 
    cnt++; 
. 
. 
. 
} 

자바 스크립트 :

var qString = ""; 
for (var i=1;i<=<?php echo $cnt; ?>;i++) { 
    qString += '&box'+i+'='+document.getElementById('box'+i).value; 
} 
qString = "?"+qString.substring(1); 

---

2. PHP는 :

<input type="text" id="box[]" value="'.... 

단순히 양식을 제출하거나 직렬화와 jQuery를 Ajax를 사용합니다.