如何用JavaScript/jQuery将Div内容存入隐藏字段并提交表单

首先修正你现有代码的核心问题：HTML中ID必须唯一，你给div和对应的hidden input用了相同ID，这会导致JS获取元素时出错。先把hidden input的ID修改为唯一值，比如添加_hidden后缀，修正后的HTML如下：

<form name="module" id="module" method="post" action=""  title="postthis">

<div name="mytext" id="mytext">Here's something I want to pass</div>
<div name="mytext2" id="mytext2">Again, I want this div to act as a text area</div>
<div name="mytext3" id="mytext3">Another text</div>
<div name="mytext4" id="mytext4">Yet another</div>
<div name="mytext5" id="mytext5">Last one</div>

<input name="mytext" type="hidden" id="mytext_hidden" value="" />
<input name="mytext2" type="hidden" id="mytext2_hidden" value="" />
<input name="mytext3" type="hidden" id="mytext3_hidden" value="" />
<input name="mytext4" type="hidden" id="mytext4_hidden" value="" />
<input name="mytext5" type="hidden" id="mytext5_hidden" value="" />

<input name="insert" type="submit" class="btn btn-primary" id="insert" value="Save my fields" onClick="return validate_login(module);" />
</form>

一、原生JavaScript实现 #

在表单提交前，将每个div的文本内容赋值给对应hidden字段，有两种触发方式：

方式1：绑定表单提交事件 #

const form = document.getElementById('module');

form.addEventListener('submit', function() {
    // 逐个将div内容同步到hidden字段
    document.getElementById('mytext_hidden').value = document.getElementById('mytext').textContent.trim();
    document.getElementById('mytext2_hidden').value = document.getElementById('mytext2').textContent.trim();
    document.getElementById('mytext3_hidden').value = document.getElementById('mytext3').textContent.trim();
    document.getElementById('mytext4_hidden').value = document.getElementById('mytext4').textContent.trim();
    document.getElementById('mytext5_hidden').value = document.getElementById('mytext5').textContent.trim();
    
    // 保留原有验证逻辑
    return validate_login(module);
});

方式2：整合到现有验证函数 #

如果想直接通过按钮的onClick触发，把赋值逻辑写到validate_login里：

function validate_login(form) {
    // 先同步div内容到hidden字段
    document.getElementById('mytext_hidden').value = document.getElementById('mytext').textContent.trim();
    document.getElementById('mytext2_hidden').value = document.getElementById('mytext2').textContent.trim();
    document.getElementById('mytext3_hidden').value = document.getElementById('mytext3').textContent.trim();
    document.getElementById('mytext4_hidden').value = document.getElementById('mytext4').textContent.trim();
    document.getElementById('mytext5_hidden').value = document.getElementById('mytext5').textContent.trim();
    
    // 这里写你的表单验证逻辑，验证通过返回true，不通过返回false
    return true;
}

二、jQuery实现 #

如果项目已引入jQuery，代码会更简洁，通过字段名称批量匹配同步：

$('#module').on('submit', function() {
    // 遍历所有name以mytext开头的div，同步内容到对应name的hidden字段
    $('div[name^="mytext"]').each(function() {
        const fieldName = $(this).attr('name');
        $(`input[name="${fieldName}"][type="hidden"]`).val($(this).text().trim());
    });
    
    // 保留原有验证逻辑
    return validate_login($('#module')[0]);
});

关键说明 #

• textContent（原生JS）或text()（jQuery）用于获取div纯文本内容，trim()去除前后多余空格和换行。
• 后端接收数据时，直接通过mytext、mytext2等name字段就能拿到对应div的内容。
• 必须保证DOM元素ID唯一，否则JS无法正确定位元素。

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