在提交表单之前强制更改隐藏字段的值答案

【问题标题】：Forcing a change in the value of the hidden field before submitting a form在提交表单之前强制更改隐藏字段的值
【发布时间】：2016-06-30 18:01:41
【问题描述】：

我正在尝试通过 JavaScript 更改隐藏字段的值。在我的页面中有两个按钮，一个用于返回主页（index.php），另一个用于返回第一页进行数据输入（addData.php）。我正在尝试使用 ID 为 "goHome" 的隐藏字段来控制路由。我的代码是这样的：

HTML（仅限表单）

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "addDataProc.php" onsubmit="return checkNSub()">
        <!-- Other items -->
        <input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/>
        <input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/>
        <input type = "hidden" name = "goHome" id = "goHome" value = "" />
    </div>   
</form>

Javascript

function checkNSub() {
    //form validation functions
    //OK then return true
    //Not then return false
}
function getGoValue(goHome) {
    if (goHome) {
        document.getElementById("goHome").value = "true";
    } else {
        document.getElementById("goHome").value = "false";
    }
    return true;
}

在此之前我已经尝试了很多其他版本，我参考了这几个问题：

Set form hidden value on submit

Setting a form variable value before submitting

How to change the value of hidden input field before submitting

但没有一种方法对我有用。

出于实际目的，有一个解决方法，但我想知道我是否想保留这两个按钮，应该如何修改我的代码，以便可以在提交表单之前更改 "goHome" 的值?经过多次尝试，我仍然收到$_POST["goHome"] = ""。

还有，为什么之前提交的表单是之前的代码，实际改变了之前的值？

谢谢！

【问题讨论】：

由于您正在提交表单，服务器可以通过尝试获取参数submitBtnF来判断使用了两个按钮中的哪一个，如果没有则尝试获取submitBtnR 的值。现在服务器可以处理/保存表单数据，然后如果使用submitBtnF 提交表单，则redirect 到主页，如果使用submitBtnR，则再次添加Data.php。

标签： javascript html forms hidden

【解决方案1】：

实现这一目标的各种方法。首先请记住，您在 <form> 内使用 type="submit" <input> ，这意味着无论是否发生 onclick 事件，它们都会自动提交表单。

一种尽可能不干扰（对您的代码）的方式如下：

像这样从表单中取出提交输入：

示例：

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "whatever.php">
        <!-- Other items -->
        <input type = "hidden" name = "goHome" id = "goHome" value = "" />
    </div>   
</form>

<input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/>
<input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/>

像这样更改您的 getGoValue() 和 checkNSub() 函数：

function checkNSub() {
    //form validation functions
    //OK then return true
    //Not then return false
    var myForm = document.getElementById('addDataReal');
    myForm.submit();
}

function getGoValue(goHome) {
    if (goHome) {
        document.getElementById("goHome").value = "true";
        console.log(document.getElementById("goHome").value);
        checkNSub();
    } else {
        document.getElementById("goHome").value = "false";
        console.log(document.getElementById("goHome").value);
        checkNSub();
    }
    return true;
}

试试看。

P.S：几个console.logs，这样您就可以检查值的变化。注释掉 checkNSub(); 以在您的控制台中查看它们。不过请记住，您正在发布一个表单，这意味着您将从服务器加载一个新页面，这个新页面将与您的“goHome”值无关。 “goHome”值仅在您在同一页面上时存在。一旦你的 DOM 被“重新创建”，你就会失去它。

附言 2：

getGoValue(); 中的 return true; 不需要我的例子。您可以删除它。
您的onclick = "return getGoValue(true)" 中的return 也是不需要，您可以删除它

附言 3：此回复的重点是保持您的大部分代码完好无损。实际上，既然您的 inputs 在表单之外，则无需将它们设为 type="submit"，您应该使用 onClick 事件（或 Listeners）将它们更改为 <button>。

【讨论】：

【解决方案2】：

这是个老问题，但我想如果有人还在寻找答案，那就是这里

你可以试试jquery $('input[name="goHome"]').val('true'); 或 JS - document.getElementByName("goHome").value = "true"; 这肯定会奏效。

在提交使用名称选择器而不是 ID 时更新任何值，这将为您节省一些时间:)

当我们在提交表单时尝试更改隐藏字段的值时，它并没有更新值，因为 DOM 已经从输入参数中分离了 ID，但名称仍然存在，因为名称将在表单中传递。

如果有人发现这很有用，并且他们不必为了一个简单的解决方案而工作很多小时:)

快乐编码:)

【讨论】：