Question

我有一个form，里面有几个<input>标签。我有一个提交按钮（实际上是<input>类型BUTTON，不是 SUBMIT）在之外的表单。我的表单设置与此类似 -

<form name="testform" id="testform" action="test.jsp" onsubmit="return modify_value();" method="POST">
<input name="test1" id="test1" type="TEXT" value="A"/>
<input name="test2" id="test2" type="TEXT" value="B"/>
<input name="test3" id="test3" type="HIDDEN"/>
</form>

表单之外的提交按钮以这种方式定义 -

<input type="BUTTON" id="_submit" onclick="document.forms[0].submit();"/>

modify_value() JavaScript方法看起来像这样 -

function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    return true;
}

单击提交按钮时，我尝试在提交表单之前修改test3元素的值。出于某种原因，我永远无法在servlet中读取新值。

替代方法 - （~~无法使用~~）工作！

我尝试以稍微不同的方式提交表单 - 通过将按钮的onclick事件设置为指向modify_value()方法，并在该方法的最后一行中调用{{1而不是返回一个值（编辑：当然，删除表单中的form.submit()属性）。这也不起作用。

我在这里做错了什么？

Answer 1

在JavaScript中调用.submit()时。不调用表单的onsubmit事件处理程序。

我会将按钮放在表单中，并将其设置为提交按钮。否则它只是一个死按钮（在语义上，当JavaScript不可用时）。

~~在HTML验证中，你不允许在FORM元素之外使用INPUT元素。~~很奇怪，你似乎就是这样！哈哈，我从来不知道......

如果您需要在答案中指定的限制范围内工作，请删除onsubmit属性：

<form name="testform" id="testform" action="test.jsp" method="POST">
<input name="test1" id="test1" type="TEXT" value="A"/>
<input name="test2" id="test2" type="TEXT" value="B"/>
<input name="test3" id="test3" type="HIDDEN"/>
</form>

...并更改onclick属性以修改值...

<input type="BUTTON" id="_submit" onclick="modify_value()"/>

...并将表单提交添加到函数末尾，无需返回任何值...

function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    document.forms[0].submit();
}

Answer 2

你可以试试这个

<input type="BUTTON" id="_submit" onclick="modify_value()"/>
function modify_value()
{
    var hidden_field = document.getElementById('test3');
    hidden_field.value = 'new_test_value_set_on_clicking';
    document.getElementById("testform").Submit();
}

Answer 3

试试这个......

HTML

<form name="testform" id="testform" action="test.jsp" onsubmit="return false;" method="POST">  // onsubmit to return false
.....
<input type="submit" id="_submit" onclick="modify_value()"/> //call javascript function
</form>

JAVACRIPT

function modify_value()
{
   var hidden_field = document.getElementById('test3');
   hidden_field.value = 'new_test_value_set_on_clicking'; // do the things here
   document.getElementById('testform').Submit(); // submit the form
}

Answer 4

您现在实际上可以在HTML中完全执行此操作，请参阅~~提交按钮的form属性~~所有<input>元素 - HTML5的新内容。

与input元素关联的表单元素（其表单所有者）。该属性的值必须是<form>元素的 id 文献。如果未指定此属性，则此<input>元素必须是<form>元素的后代。此属性使您将<input>元素放在文档中的任何位置，而不仅仅是他们的形式元素的后代。

以下是如何使用它的示例：

<input type="submit" form="download" value="Download Selection" />

然后可以将此按钮放在页面的任何位置。

显然这只适用于目前有限数量的浏览器，但我认为值得一提。

在其外部提交带有INPUT的表单，并在修改值之后

4 个答案: