Asp.Net Core MVC6中用jQuery读取动态Div内的Input值

核心问题原因 #

HTML规范中ID属性必须全局唯一，你当前重复使用SearchSSN和SearchLastName作为ID，导致document.getElementById()只会返回第一个匹配的元素，所以无法获取多个输入框的值。

解决方案 #

方案1：使用类名+父容器定位（推荐） #

修改Razor页面的渲染逻辑，给输入框添加类名，同时保留父Div的唯一ID：

<!-- 动态生成的A1容器 -->
<div id="A1" class="search-box">
    <input type="text" class="search-ssn" placeholder="输入SSN" />
    <input type="text" class="search-lastname" placeholder="输入姓氏" />
    <button onclick="Search('A1')">搜索</button>
</div>

<!-- 动态生成的A2容器 -->
<div id="A2" class="search-box">
    <input type="text" class="search-ssn" placeholder="输入SSN" />
    <input type="text" class="search-lastname" placeholder="输入姓氏" />
    <button onclick="Search('A2')">搜索</button>
</div>

对应的JavaScript函数：

function Search(containerId) {
    // 获取目标容器元素
    const container = document.getElementById(containerId);
    // 在容器范围内查找输入框
    const ssnValue = container.querySelector('.search-ssn').value;
    const lastNameValue = container.querySelector('.search-lastname').value;
    
    // 后续处理逻辑，比如提交搜索请求
    console.log(`容器${containerId}的SSN: ${ssnValue}, 姓氏: ${lastNameValue}`);
}

方案2：生成带前缀的唯一ID #

如果必须使用ID定位，可在Razor渲染时将父Div的ID作为输入框ID的前缀，确保全局唯一：

@* 假设动态数据来自模型列表 *@
@foreach (var item in Model.DynamicItems)
{
    <div id="@item.DivId" class="search-box">
        <input type="text" id="@($"{item.DivId}_SearchSSN")" placeholder="输入SSN" />
        <input type="text" id="@($"{item.DivId}_SearchLastName")" placeholder="输入姓氏" />
        <button onclick="Search('@item.DivId')">搜索</button>
    </div>
}

对应的JavaScript函数：

function Search(containerId) {
    const ssnValue = document.getElementById(`${containerId}_SearchSSN`).value;
    const lastNameValue = document.getElementById(`${containerId}_SearchLastName`).value;
    
    console.log(`容器${containerId}的SSN: ${ssnValue}, 姓氏: ${lastNameValue}`);
}

方案3：批量获取所有容器的输入值 #

如果需要一次性获取所有动态生成容器的输入值（比如页面有统一的"全部搜索"按钮），可遍历所有容器：

function SearchAll() {
    // 获取所有搜索容器
    const allContainers = document.querySelectorAll('.search-box');
    
    allContainers.forEach(container => {
        const containerId = container.id;
        const ssnValue = container.querySelector('.search-ssn').value;
        const lastNameValue = container.querySelector('.search-lastname').value;
        
        console.log(`容器${containerId}的SSN: ${ssnValue}, 姓氏: ${lastNameValue}`);
        // 执行每个容器的搜索逻辑
    });
}

内容的提问来源于stack exchange，提问作者Diego