如何使用 AJAX/PHP 获取具有相同 ID 的动态生成的文本框的值？答案

【问题标题】：How to get value of dynamically generated textbox with same id using AJAX/PHP?如何使用 AJAX/PHP 获取具有相同 ID 的动态生成的文本框的值？
【发布时间】：2016-07-05 15:32:32
【问题描述】：

在此网页中，我正在动态生成多个文本框，每个文本框都旨在保存唯一值，我想动态获取该值。但我无法根据文本框的位置捕获其值。此代码仅适用于第一个生成的文本框。我有这样的代码

<tr>
<td  align="center"><input type="text" name="serialNoArray[]" id="serialArray" onChange="checkusername()" ><span id="std_id_status"></span></td>
</tr>

<script> 
function checkusername() { 
    var s = _("serialArray").value; 
    if(s != "") {  
        _("std_id_status").innerHTML = 'checking ...'; 
        var ajax = ajaxObj("POST", "sellingDetails.php");
        ajax.onreadystatechange = function() { 
            if(ajaxReturn(ajax) == true){
                _("std_id_status").innerHTML = ajax.responseText;
            }
        }
        ajax.send("std_id_check="+s);
      }             
}    
</script>

【问题讨论】：

您是通过 JS 还是 PHP 动态添加它们？如果 JS，现有的 JavaScript 将不知道新添加的 DOM 元素。您将不得不使用事件委托将事件冒泡到 DOM 中的某个点，当 JS 在页面加载时运行时该点就在那里。
duplicate ids 是非法的 html，您无能为力。 getElementById 只会返回一个元素。您需要将 ID 更改为每个 ID 都是唯一的。
那么我应该如何将具有动态 ID 的值发送到 'checkusername()' 函数，以便可以将其存储在该变量 's' 中？

标签： javascript php html ajax

【解决方案1】：

首先您应该使用类而不是 id，因为具有 id 的元素对于整个文档来说必须是唯一的。并且由于您使用 onChange ，因此您可以使用 this 传递元素，就像 onChange="checkusername(this)" 一样。我想您还应该更改 restrict 函数 onkeyup="restrict('serialArray')" 的代码，但我没有看到该代码，所以如果您不提供此代码，我无法为您提供更多帮助...

    <tr>
    <td  align="center"><input type="text" name="serialNoArray[]" class="serialArray" onkeyup="restrict('serialArray')" onChange="checkusername(this)" ><span class="std_id_status"></span></td>
    </tr>

然后你可以只获取被改变元素的值并且只改变匹配跨度的html。（我在例子中使用了jQuery，所以你应该将它包含在你的文档中。）

<script>
    function checkusername(s) {

        if (s.value != "") {
            $(s).nextAll('.std_id_status').first().html('checking ...');
            var ajax = ajaxObj("POST", "sellingDetails.php");
            ajax.onreadystatechange = function() {
                if (ajaxReturn(ajax) == true) {
                  $(s).nextAll('.std_id_status').first().html(ajax.responseText);
                }
            }
            ajax.send("std_id_check=" + s.value);
        }
    }
</script>

由于我没有你所有的 javascript 代码，我无法对其进行测试，但这样的东西应该可以工作。

【讨论】：

正如我所说......“因为我没有你所有的 javascript 代码，所以我无法测试它，但这样的东西应该可以工作。”所以也许你想更具体并定义什么不工作...控制台有错误吗？

【解决方案2】：

我没有测试过，但应该这样做

所有动态生成的文本框，给它们一个类

<input type="text" class="tagMe" placeholder="Enter Serial No."  onkeypress="return isNumberKey2(event)" onkeyup="restrict('serialArray')" onChange="checkusername()" required autofocus >

收集数据

var info= "";
$('.tagMe').each( obj, function( key, value ) {
 if(info != "")
      info += "^"; // ^ is a delimiter
 info += value; 
});

将信息发送到您的服务器，在 ^ 上拆分并解析数据（注意空元素）

【讨论】：

您的代码不起作用。我希望文本框的值根据其位置，并希望将其存储在该变量中。一次一个文本框值。