Динамически сгенерированное имя ввода в 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 [ 'отдел'. $ i] работает, когда $ i = 1, потому что dept_1 записывается в HTML страницы.

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

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

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

Answer 1

Правильное решение будет использовать массив, называя элемент 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 2

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

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

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

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; 
     }); 
    });