3

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

<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>

表单外的提交按钮就是这样定义的——</p> 

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

modify_value()JavaScript 方法看起来像这样——</p >

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()方法并在该方法的最后一行，调用form.submit()而不是返回一个值（编辑：当然，删除onsubmit属性表格）。这也不起作用。

我在这里做错了什么？

4

4 回答 4

2

当你调用.submit()JavaScript 时。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();
}
于 2012-10-17T08:58:42.260 回答
1

你可以试试这个

<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();
}
于 2012-10-17T09:03:58.730 回答
0

试试这个...

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
}
于 2012-10-17T09:08:32.493 回答
0

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

输入元素关联的表单元素（其表单所有者）。属性的值必须是同一文档中元素的id 。<form>如果未指定此属性，则此<input>元素必须是元素的后代<form>。此属性使您可以将<input>元素放置在文档中的任何位置，而不仅仅是作为其表单元素的后代。

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

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

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

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

于 2012-10-17T09:10:40.520 回答