Question

我正在尝试通过JavaScript更改提交时隐藏字段的值。在我的页面中有两个按钮，一个用于返回主页（index.php），另一个用于返回到第一页进行数据输入（addData.php）。我正在尝试使用标识为"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 [SOLVED]

但这些方法都不适合我。

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

另外，为什么在代码放在那之前实际更改了值之前提交的表单？

谢谢！

顺便说一句，请不要jQuery。

Answer 1

实现这一目标的各种方法。首先，请记住，您在type="submit"内使用<input> <form>，这意味着无论是否有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被“重新创建”的那一刻你就会失去它。

P.S.2 ：

我的return true;内getGoValue();不需要return 例。你可以删除它。
onclick = "return getGoValue(true)"中的inputs也是。{ 不需要你可以删除它

P.S.3 ：此回复的重点是保持大部分代码的完整性。实际上，现在您已将type="submit"放在表单之外，因此<button>不需要将onClick更改为Listeners - name: Execute the script script: "/Path-to-local-system/installer.py -i -s -c"个事件（或{{} 1}}）。

Answer 2

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

您可以尝试使用jQuery $('input[name="goHome"]').val('true'); 或JS-document.getElementByName("goHome").value = "true"; 这肯定可以工作。

虽然在提交使用名称选择器而不是ID时更新了任何值，但可以节省一些时间：）

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

如果有人发现它有用，并且他们不必为简单的解决方案而花很多时间：）

快乐编码：）

在提交表单

2 个答案: