PHP循环生成的textarea无法获取值,求解决方法
问题解决:无法获取动态生成textarea的值
核心问题:重复的HTML ID
你的PHP循环中,每次生成的textarea和按钮都使用了固定且重复的ID(notizfeld、absenden),但HTML规范要求ID必须唯一。当你用$('#notizfeld')获取值时,jQuery只会匹配页面上第一个拥有该ID的元素,而不是当前按钮对应的那个textarea,所以返回空值。
解决方案
1. 修改PHP代码,生成唯一ID
把循环变量$n(也可结合数据库行的唯一标识)加入元素ID,确保每个textarea和按钮都是唯一的:
include"connection.php"; $stuff="here is the query"; for ($n = 1; $n <= 13; $n++) { $xy=$con->query($stuff); while($row=mysqli_fetch_assoc($xy)) { $value = $row['value']; // 给textarea和按钮添加唯一ID,结合$n确保不重复 echo"<div id='$n' class='antworten'>$value<br> <div id='notizcontainer$n' class='antwortcontainer'>Notizen:</div> <div class='antwortcontainer' id='notizerstellen$n'>Notiz erstellen:<br> <textarea id='notizfeld-$n' class='textarea'></textarea><br> <button id='absenden-$n' class='notizabsenden'>Notiz absenden</button></div> </div>"; } }
2. 简化jQuery逻辑,直接关联当前按钮对应的textarea
不需要通过父ID再查找ID,直接利用DOM层级关系(按钮和textarea同属一个父元素)定位,更高效且避免ID问题:
$(document).on('click', '.notizabsenden', function(){ // 直接找到当前按钮所在父元素下的textarea,获取其值 var notiz = $(this).closest('.antwortcontainer').find('.textarea').val(); console.log(notiz); // 现在能正确获取输入内容了 // 如果需要父元素ID,继续保留 var parentid = $(this).parent().attr('id'); console.log(parentid); });
补充说明
- 用
closest('.antwortcontainer')可以精准定位到包含按钮和textarea的父容器,避免DOM层级变化导致的选择错误; - 依赖类选择器(
.textarea)而非ID,更适合动态生成元素的场景,无需维护复杂的唯一ID规则; - 始终确保HTML中ID唯一,这是前端开发的基础规范,能避免大量选择器冲突问题。
内容的提问来源于stack exchange,提问作者pr0cz
相关产品推荐
相关产品推荐

