Question

我是JavaScript的新手，我对提交表单的脚本的准确工作有以下疑问：

所以在我的html中我有以下形式：

<form id="actionButton<%=salDettaglio.getCodice()%>" action="salwf.do?serv=1" method="post">
    <button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this,'<%=salDettaglio.getCodice()%>')">ACCEPT ICON BUTTON</button>
    <button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
    <button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>

    <input id="testId<%=salDettaglio.getCodice()%>" name="test" type="hidden">
</form>

因此，此表单的提交指向 salwf.do 页面，并且每次都传递名为 serv 的参数并且 1 为价值（这是一个GET？）

然后在表单中我有3个按钮，具有不同的 id 和不同的值以及输入标记（我认为这是我提交的内容，是不是？）

正如您所看到的，当用户单击按钮时，会调用 sottometti（this）脚本，该脚本将对生成点击的对象的引用作为参数（在本例中为单击的按钮））

这就是这个JavaScript代码：

function sottometti(obj,id){
    document.getElementById('testId'+id).value = obj.value;
    document.getElementById('actionButton'+id).submit()
}

那么这个剧本究竟如何运作？

我认为它做了以下事情（但我不确定它，也许我错过了一些东西）。

需要2个输入参数：单击的按钮引用（obj）和id字符串（表示Java对象的代码，但现在这并不重要）。

使用：

document.getElementById('testId'+id)

它检索表单的输入标记的引用，并使用按钮值设置值（我想提交的内容）（可以是：接受或< strong>取消或闷棍）

然后：

document.getElementById('actionButton'+id)

检索我的表单并提交

因此，点击按钮的值将作为 POST 提交给 salwf.do servlet。

我的推理是正确还是我错过了什么？

TNX

Answer 1

是的，你的推理是正确的，但你有一些问题。

您只能从其中一个按钮传递ID - 接受一个
对于所有按钮，您似乎想要将Accept / Cancel / SAP添加到名为testAccept，testCancel或testSAP的隐藏字段中，并提交带有ID actionButtonAccept，actionButtonCancel，actionButtonSAP的表单，但不包含字段或表单中的取消/ SAP情况。
不要在提交按钮的点击事件中提交

我愿意

function sottometti(obj){
  obj.form.test.value = obj.value;
  // obj.form.submit(); // all the buttons are submit buttons
}

Answer 2

小心一件事。在这里，您可以将JavaScript附加到按钮[type = submit]，然后执行表单提交。所以实际上你提交了两次。

如果你想阻止提交你至少应该在你的回调函数中返回false（最好无论如何使用event.preventDefault（）;）就像那个答案https://stackoverflow.com/a/23646215/2802756

一样

这个表单提交JavaScript究竟如何工作？

2 个答案: