Проверка переменной для нескольких входов после события onChange

Question

Итак, у меня есть динамическая форма, состоящая из двух столбцов. У одного есть имя задания, а у другого есть поле ввода, в котором пользователь может ввести их в описание задания.

while($install_table_r = tep_db_fetch_array($install_table_query)) 
{ 
echo' 
<tr class="dataTableRow"> 
    <td class="dataTableContent"> 
     <input type="text" id="job_name" name="job_name" 
     value="'.$install_table_r['name_of_job'].'" disabled /> 
    </td> 
    <td class="dataTableContent"> 
     <input type="text" name="job_desc" value="'.$install_comment['comment'].'" 
     onChange="insertCommentInstall(this.value,)" /> 
    </td> 
</tr> 
'; 
} 

Так как вы можете видеть, у меня есть цикл while, который заполняет эту форму. Таким образом, у потенциально может быть много полей ввода, которые вы можете использовать для описания заданий.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я обрабатываю эту форму с помощью AJAX, которую я создал. Javascript просто захватывает последнее задание в списке и использует его как имя задания. Таким образом, по сути, он правильно захватывает поле ввода, просто помещает его в неправильный ряд.

Это javascript, обрабатывающий это изменение.

var job = document.getElementsByNames("job_name").value; 
var comment = document.getElementsByNames("job_desc").value; 
var url = "<?php echo FILENAME_ORDERS_EDIT_AJAX; ?>?action=insert_comment_install&oID=<?php 
echo $_GET['oID']; ?> &new_comment=" + value + "&jobname=" + job; 

Я знаю, что я должен быть захватывая элементы с getElementByNames, но я просто не знаю, как паре комментарий с соответствующей работой, которую он должен пойти с. Поэтому, если кто-то комментирует рядом с полем ввода для граничного задания, комментарий должен быть сопряжен с именем задания «Гранитное задание» в базе данных. Вместо этого в настоящее время он просто будет спарен с последней работой в списке, который является «Assembly Assembly».

Любая помощь будет оценена по достоинству.

Answer 1

Прежде всего, у вас есть ошибки HTML для атрибута id Вы не можете в стандартах HTML, чтобы дать одинаковое значение для атрибута id до нескольких элементов.

Но, к счастью, мы можем использовать этот уникальный идентификатор, чтобы сделать ваш код работает Вы можете изменить свой PHP код в какие-то вещи, как это:

$counter=0; 
while($install_table_r = tep_db_fetch_array($install_table_query)) 
{ 
echo' 
<tr class="dataTableRow"> 
    <td class="dataTableContent"> 
     <input type="text" id="job_name_'.$counter.'" 
     value="'.$install_table_r['name_of_job'].'" disabled /> 
    </td> 
    <td class="dataTableContent"> 
     <input type="text" id="job_desc_'.$counter.'" value="'.$install_comment['comment'].'" 
     onChange="insertCommentInstall(this.value,'.$counter.')" /> 
    </td> 
</tr> 
'; 
$counter++; 
} 

Вы можете увидеть, мы добавили счетчик, чтобы определить наши ряды

Обновление кода Javascript будет следующим:

var insertCommentInstall=function(value,identifier){ 
    var job = document.getElementById("job_name_"+identifier).value; 
    var comment = document.getElementById("job_desc_"+identifier).value; 
    var url = "<?php echo FILENAME_ORDERS_EDIT_AJAX; ?>?action=insert_comment_install&oID=<?php echo $_GET['oID']; ?> &new_comment=" + value + "&jobname=" + job; 
} 

Answer 2

При использовании селектора типа getElementsByClassName или getElementsByTagName вы извлекаете нод-лист всех элементов с указанным атрибутом (добавление имени класса к вашим входам облегчило бы это). Вам нужно указать один конкретный узел из нодлиста, чтобы получить его значение. Чтобы получить все значения в вашем нодлисте, вам нужно пройти через него и push значения всех его узлов в массив.

//finds all elements with classname "jobs" 
var jobs = document.getElementsByClassName("jobs"); 

//create new array that we push all the values into 
var jobValues = []; 

//loop through our jobs nodelist and get the value of each input 
for (var i = 0; i < jobs.length - 1; i++) { 
    jobValues.push(jobs[i].value); 
} 

jobValues; //gives you a list of all the values you pushed into the array 
jobValues[5]; //gives you the value of the 6th input you looped through