如何将Sweetalert输入变量随表单POST提交到PHP后端

hardwareComputerName收不到的核心原因非常直接：你从Sweetalert拿到输入值之后，根本没把这个值放到待提交的表单里。
原生表单调用submit()方法时，只会提交表单内部带name属性的表单控件值，你现在的#computerRenameForm里只有rename、computerID两个隐藏输入框，弹窗输入的内容只存在于JS的临时变量里，没有挂载到表单DOM上，提交POST请求的时候自然不会携带这个参数，后端当然拿不到。

两种方案按需选择即可，第一种改造成本最低。

方案1：提交前动态插入隐藏表单字段 #

在触发表单提交前，动态往表单里加一个name为hardwareComputerName的隐藏input，把弹窗拿到的值塞进去，提交时就会自动带上这个参数。
只需要修改JS里的判断逻辑即可：

if (hardwareComputerName) {
    const renameForm = document.getElementById("computerRenameForm");
    // 新增隐藏输入项存储弹窗输入值
    const nameInput = document.createElement("input");
    nameInput.type = "hidden";
    nameInput.name = "hardwareComputerName";
    nameInput.value = hardwareComputerName;
    renameForm.appendChild(nameInput);
    // 再提交表单
    renameForm.submit();
}

改完之后后端就能正常通过$_POST['hardwareComputerName']拿到值了。

方案2：改用AJAX异步提交 #

如果不想额外插入DOM，也可以放弃原生表单提交，拿到弹窗值之后直接用fetch之类的API发异步POST请求，手动把所有需要的参数塞到请求体里：

if (hardwareComputerName) {
    const computerID = document.querySelector('input[name="computerID"]').value;
    // 发POST请求
    fetch("computerRename", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({
            rename: "",
            computerID: computerID,
            hardwareComputerName: hardwareComputerName
        })
    }).then(() => {
        // 这里写提交成功后的逻辑，比如刷新页面、跳转到列表
        location.reload();
    });
}

• PHP端接收参数时记得加存在性判断，避免参数缺失时报PHP警告，参考写法：

  $hardwareComputerName = isset($_POST['hardwareComputerName']) ? trim($_POST['hardwareComputerName']) : '';
  

• 后端一定要对hardwareComputerName做格式校验，Windows计算机名有长度、特殊字符限制，不要直接拿用户传入的参数执行系统操作，避免安全问题。

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