Динамически генерируемое имя ввода в JavaScript

Question

Я пытаюсь создать страницу, на которой пользователи могут добавлять в таблицу столько строк, сколько они хотят, а затем значения входов (в каждой ячейке таблицы есть вход) передаются обратно на страницу.

Моя проблема возникает при попытке сделать имя каждого динамически генерируемого поля ввода отличным. Я пытался создать переменную, чтобы сделать это, но синтаксис, который я использую, который работает в других местах, похоже, не работает при создании новых элементов.

Вот код, о котором идет речь:

    if ($_POST['dept_1'] != null){  //If there was an input
    $i = intval($_POST['num_of_rows']);
    while ($i != 0){
        $dept = $_POST['dept_' . $i];
        $hours = $_POST['hours_' . $i];
        echo $dept . " " . $hours . "\n";
        $i--;
    }
}

.....

var i = 2;
        $("document").ready(function(){
            $("#newrow").click(function(e){
                $("#maintable").append('<tr> \
                                        <td><input type="text" name="dept_" + i size="5" maxlength="5" /></td> \
                                        <td><input type="text" name="hours_" + i size="5" maxlength="1" /></td> \
                                    </tr>');
                                    alert("dept_" + i);
                e.preventDefault();
                $("#hiddenvalue").attr("value", "" + i + "");
                i = i + 1;
            });
        });

$ POST ['dept '. $ i] работает, когда $ i = 1, потому что dept_1 записывается в HTML-код страницы.

alert ("dept_" + i) работает, объединяя значение i в строку.

name = "dept_" + я не работаю. Осматривая новый элемент, его имя «dept_ + i»

Почему это происходит и как я могу это исправить?

Answer 1

Не делай это так тяжело для себя. Используйте имя массива.

<td><input type="text" name="dept[]" size="5" maxlength="5" /></td>
<td><input type="text" name="hours[]" size="5" maxlength="1" /></td>

Получите значения в PHP, используя $ _POST ['dept'] и $ _POST ['hours'], которые будут возвращать хорошие чистые массивы.

Answer 2

Правильным решением было бы использование массива путем присвоения имени элементу dept[];это даст вам массив $_POST['dept'] на стороне PHP.

Кроме того, подсветка синтаксиса уже показывает вам проблему: ваш +i внутри строки;используйте это вместо:

$("#maintable").append('<tr> \
    <td><input type="text" name="dept_' + i + '" size="5" maxlength="5" /></td> \
    <td><input type="text" name="hours_' + i + '" size="5" maxlength="1" /></td> \
  </tr>');

Answer 3

Вам необходимо исправить некоторые синтаксические ошибки JavaScript в вашей строке, например, так, чтобы вы заканчивали строку в соответствующих местах, чтобы у вас было 'string1' + i + 'string2':

    var i = 2;
    $("document").ready(function(){
        $("#newrow").click(function(e){
            $("#maintable").append('<tr> \
                                    <td><input type="text" name="dept_' + i + '" size="5" maxlength="5" /></td> \
                                    <td><input type="text" name="hours_' + i + '" size="5" maxlength="1" /></td> \
                                </tr>');
                                alert("dept_" + i);
            e.preventDefault();
            $("#hiddenvalue").attr("value", "" + i + "");
            i = i + 1;
        });
    });