JavaScript动态创建表单提交无数据，仅触发页面刷新问题

嘿，我看你遇到的问题是点击按钮触发表单提交后，只有页面刷新但数据根本没传到服务器对吧？咱们来拆解下你代码里的问题，然后一步步修复：

你的代码里的核心问题 #

1. 隐藏输入框没添加到表单里：你创建了hiddenField这个隐藏输入元素，但没有把它挂载到你新建的Myform表单中——服务器自然接收不到任何数据，因为表单里根本没这个字段。
2. 代码语法不完整：你写的hiddenField.setAttribute("value..."明显没写完，这会直接导致JS报错，后续代码都执行不了。
3. 表单未挂载到DOM（可选但推荐）：虽然部分浏览器允许提交未添加到DOM的表单，但这不是标准行为，可能导致不可预期的问题。

修正后的完整代码 #

$('#erase').on('click', function(e) {
    // 阻止按钮默认的刷新行为（保险起见加上）
    e.preventDefault();

    // 创建表单元素
    var Myform = document.createElement("form");
    Myform.setAttribute("method", "POST");
    Myform.setAttribute("action", "formular-test.php");

    // 创建隐藏输入框并补全属性
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "peter");
    hiddenField.setAttribute("value", "你要发送的具体值"); // 补全value的设置

    // 把隐藏输入框添加到表单里！这步是关键
    Myform.appendChild(hiddenField);

    // 把表单添加到DOM中（确保提交行为正常）
    document.body.appendChild(Myform);

    // 提交表单
    Myform.submit();

    // 提交后移除表单，避免DOM冗余
    document.body.removeChild(Myform);
});

额外的优化建议 #

如果不想页面刷新，可以考虑用jQuery的AJAX实现无刷新提交，代码更简洁：

$('#erase').on('click', function(e) {
    e.preventDefault();
    $.post("formular-test.php", { peter: "你要发送的具体值" }, function(response) {
        // 这里可以处理服务器返回的响应
        console.log("数据发送成功！", response);
    });
});

这样修改后，点击按钮就能正常把peter字段和对应值发送到服务器啦～

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