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来抓取这些元素，但我只是不知道如何将注释与它应该使用的正确工作配对。因此，如果有人在Granite Job的输入框旁边发表评论，则评论应与数据库中的作业名称“Granite Job”配对。相反，目前它只是与名单上的最后一个工作配对，即“内阁组装”。

任何帮助都将不胜感激。

Answer 1

当您使用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

Answer 2

首先，您有一个属性id的HTML错误您可能不会在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;
}

在onChange事件

2 个答案: