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

Forcing a change in the value of the hidden field before submitting a form

本文关键字：隐藏 字段 表单 提交      更新时间：2023-09-26

我试图改变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;
}

在此之前，我尝试了许多其他版本，并参考了以下几个问题:

设置表单隐藏值

在提交前设置表单变量值

如何在提交

之前更改隐藏输入字段的值

但是这些方法都不适合我。

对于实际目的有一个变通办法，但我想知道，如果我想保持这两个按钮，我的代码应该如何修改，以便"goHome"的值可以在表单提交之前改变?经过多次尝试，我仍然得到$_POST["goHome"] = ""。

另外，为什么在实际更改值之前提交表单，而将代码放在此之前?

谢谢!

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

你可以试试jquery $('input[name="goHome"]').val('true');或JS - document.getElementByName("goHome").value = "true";

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

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

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

Happy Coding:)

有多种方法可以实现。首先，请记住，您在<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"，你应该改变他们的<button>与onClick事件(或Listeners)。

相关文章：