Как я могу получить правильное количество динамически генерируемых переменных, используя php и javascript?

Question

У меня есть несколько текстовых полей, которые генерируются динамически;количество ящиков может отличаться каждый раз.Как сопоставить количество переменных, созданных в javascript (box1, box2 и т. Д.), С количеством строк, вызванных из таблицы на серверной части?Пример: если в результате $ query есть только 2 строки, должны быть только 2 переменные javascript (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

Мои предложения:

1. PHP и JavaScript

PHP:

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

JavaScript:

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 с serialize.

Answer 2

Вы можете собрать массив значений блоков в вашем JavaScript, например,

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 '&'

Преимущество этого подхода состоит в том, что нет необходимости вставлять php в ваш JS (за исключением сомнительных сравнений, например, если у вас есть другая страница).элемент с идентификатором 'box6' и ваша таблица заканчивается на 'box5', вы получите прикольные результаты).Конечно, если вам не нужны ссылки на значения, кроме как для создания строки запроса, вы можете просто построить строку, циклически перебирая значения, и вообще пропустить их сохранение в массиве, например,

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 3

Вы должны вывести свой 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;
    }

И где ваш JavaScript ...

echo $str;