在 JavaScript 中更改输入和提交表单的值

Posted 2023-02-22

【中文标题】在 JavaScript 中更改输入和提交表单的值

【英文标题】：Change value of input and submit form in JavaScript

【发布时间】：2011-10-18 05:43:33

【问题描述】：

我目前正在制作一个基本表格。当您点击提交按钮时，它应该首先更改字段的值，然后像往常一样提交表单。看起来有点像这样：

<form name="myform" id="myform" action="action.php">
    <input type="hidden" name="myinput" value="0" />
    <input type="text" name="message" value="" />
    <input type="submit" name="submit" onclick="DoSubmit()" />
</form>

这就是我对 javascript 代码的了解。它将“myinput”的值更改为 1，但不提交表单。

function DoSubmit()
  document.myform.myinput.value = '1';
  document.getElementById("myform").submit();

【问题讨论】：

为什么不在 html 中将 myinput 值改为 1？

我当然可以，但如果这是我想要的，我就不会问了

@Paparappa 这个反应杀了它！

【参考方案1】：

你可以这样做：

<form name="myform" action="action.php" onsubmit="DoSubmit();">
    <input type="hidden" name="myinput" value="0" />
    <input type="text" name="message" value="" />
    <input type="submit" name="submit" />
</form>

然后修改你的DoSubmit函数只返回true，表示“没关系，现在可以提交表单了”给浏览器：

function DoSubmit()
  document.myform.myinput.value = '1';
  return true;

我也会警惕在提交按钮上使用 onclick 事件；事件的顺序不是很明显，如果用户通过例如在文本框中点击返回来提交，您的回调将不会被调用。

【讨论】：

不，您可以像这样使用name 属性访问表单及其子元素。

+1 指出当通过按下按钮本身以外的其他方式提交时不会触发 onclick 事件。

【参考方案2】：

document.getElementById("myform").submit();

这不起作用，因为您的表单标签没有 id。

像这样改变它，它应该可以工作：

<form name="myform" id="myform" action="action.php">

【讨论】：

哦，它有一个 ID，对不起，我的编码有点快。编辑了之前的帖子。

【参考方案3】：

这是简单的代码。您必须为您的输入设置一个 id。这里称它为“myInput”：

var myform = document.getElementById('myform');
myform.onsubmit = function()
    document.getElementById('myInput').value = '1';
    myform.submit();
;

【参考方案4】：

没有。当您的输入类型是提交时，您应该在标记中声明一个onsubmit 事件，然后进行您想要的更改。意思是，在你的表单标签中定义一个onsubmit。

否则将输入类型更改为按钮，然后为该按钮定义onclick 事件。

【参考方案5】：

您正在尝试访问基于name 属性的元素，该属性适用于回发到服务器，但JavaScript 响应id 属性。添加一个与name 具有相同值的id，一切都应该正常工作。

<form name="myform" id="myform" action="action.php">
  <input type="hidden" name="myinput" id="myinput" value="0" />
  <input type="text" name="message" id="message" value="" />
  <input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>

function DoSubmit()
  document.getElementById("myinput").value = '1';
  return true;

【参考方案6】：

我的问题原来是我分配为document.getElementById("myinput").Value = '1';

注意到 Value 中的大写 V 了吗？一旦我将其更改为小写，即 value，数据就会开始发布。奇怪的是它也没有给出任何 JavaScript 错误。

【讨论】：

为什么会报错？您正在创建一个新属性“Value”，这非常好。

我想说的是我将“价值”称为“价值”。它当然会给出一个未定义的错误，因为这个属性“Value”没有被初始化

好吧，它会：1）如果你正在设置它，不会出错，2）如果你正在使用它，那么默默地返回undefined，这不是错误。

你是对的..我应该再澄清一点..我正在分配一个“价值”属性并发布一个表格。服务器中收到的 POST 正在寻找“值”，因此从未找到我设置的值

【参考方案7】：

您可以使用 onchange 事件：

<form name="myform" id="myform" action="action.php">
    <input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
    <input type="text" name="message" value="" />
    <input type="submit" name="submit" onclick="DoSubmit()" />
</form>

【参考方案8】：

这可能会对你有所帮助。

您的 HTML

<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>

你的脚本

    <script>
        function save()
            $('#myinput').val('1');
            $('#form').submit();
        
    </script>