访问'；邮政'；使用JavaScript或检查哪个提交按钮用于提交表单

考虑一个带有2个提交按钮的简单表单

<form method="post">
 <button type="submit" name="command" value="cancel">Cancel Order</button>
 <button type="submit" name="command" value="proceed">Save Order</button>
</form>

取消订单
保存订单

提交后，服务器将通过检查

命令

的值来知道使用哪个提交按钮提交表单。太好了

在本例中，我使用表单的

onsubmit

事件处理程序来预处理表单数据，并通过AJAX发送表单数据。像这样：

我使用这个

ajaxSubmit

函数作为检查任何提供的表单元素并通过Ajax发送数据的一般方法。如果选中了复选框，在一个组中选择了哪个单选项，那么这可以很好地确定文本字段的值。唯一似乎出错的事情（因为我不确定如何选中）是使用了哪个提交按钮来提交表单。i、 e在

myForm[“command”]

中没有任何内容可以告诉您实际使用了两个命令按钮中的哪一个

相反，是否有一种方法可以访问服务器在发送之前通过JavaScript接收的相同“post”数据

否则，这只是我需要解决的一个缺陷吗？最好的办法是什么

编辑： 由于所有现代浏览器都会传递用于提交表单的按钮的名称/值（以及其他相关部分，如从组中选择哪个选项、复选框名称/值等），有人能解释为什么在发送到服务器之前无法直接访问此数据吗？我们不能这样做有什么原因吗

相反，是否有一种方法可以访问服务器在发送之前通过JavaScript接收的相同“post”数据

不是确切的数据，不是

要知道按下了哪个

submit

按钮，通常的方法是（不幸的是）将

单击

处理程序附加到按钮上，并让它们设置一个变量（或

隐藏

字段的值），然后您可以在

提交

事件处理程序中进行检查

由于您使用的是老式的DOM0事件处理程序属性，

hidden

字段可能更适合您的操作：

<form method="post">
 <input type="hidden" name="submitclicked" value="">
 <button type="submit" name="command" value="cancel" onclick="submitClick(this);">Cancel Order</button>
 <button type="submit" name="command" value="proceed" onclick="submitClick(this);">Save Order</button>
</form>

…但我确实建议改为使用DOM2样式的事件处理程序，或者至少在代码块中附加DOM0处理程序，因为这样可以避免创建全局函数、共享数据而不创建全局变量等

---

需要明确的是，您不必在每个元素上指定

onclick

属性，我在上面这样做的唯一原因是因为您使用的是DOM0处理程序

更好的处理方法是使用事件冒泡。由于

单击

事件从其子控件（包括提交按钮）冒泡到表单，因此您可以将事件挂接到表单上，然后查看它是否发生在提交按钮上，如果发生，则该按钮的

值是多少

例如，这里有一个动态附加到表单的DOM0处理程序，它将提醒单击的提交按钮的值：

var form = document.getElementById("theForm");
form.onclick = function(e) {
  // Get the event
  e = e || window.event;

  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
};

|

或者在任何现代浏览器上使用DOM2处理程序（不是IE8或更早版本，但为这些浏览器添加
attachEvent
会很容易，这与
addEventListener
所做的[和它之前的事]几乎相同）：

|

或者使用库来简化（这里是jQuery，但大多数都有此功能，称为事件委派）：

|（我之所以使用它，是因为我喜欢它的清晰性；对于jQuery的最新版本，您可以使用超重载，但它不太清晰。如果您选择使用超重载，请注意参数的顺序是不同的。）

这里的要点是它并不复杂、困难或特别麻烦

关于编辑的结尾问题：

…有人能解释为什么在数据发送到服务器之前无法直接访问该数据吗

也许不是，不。重要的是要了解很多这类东西是刚刚进化出来的。与表单一起发送的submit按钮的值是一个HTML内容，显然，在执行DOM HTML表单模块时，没有人会说“嘿，我们应该在表单上有一个属性，它只存在于表单提交事件中，告诉您提交表单的内容。”这可能是有人会想到的，但是很明显，它没有。我想你可以通过删除另一个按钮来解决这个问题，这个按钮没有被点击。之后，您可以运行jQuery的serialize（），或者通过任何其他方式访问按钮的值

守则是：

<form method="post">
 <button type="submit" id=cancel name="command" value="cancel" onclick="document.getElementByid('submit').remove();submitClick(this);">Cancel Order</button>
 <button type="submit" id=submit name="command" value="proceed" onclick="document.getElementByid('cancel').remove();submitClick(this);">Save Order</button>
</form>


取消订单
保存订单
另一种解决方案是使用单选按钮而不是提交按钮（不过，您必须将单选按钮设计成按钮）

提交后，字段的值应为单击的值。您可以使用jQuery的
$（“[name=command]：selected]”
或
$（“#theForm”）.serialize（）获取所选选项


取消订单
保存订单
这一切都是合理的，但如果您打算在所有提交按钮上附加单击处理程序，那么使用提交功能来管理提交详细信息就没有什么意义了

只需使单击处理程序触发表单提交，同时将足够的上下文信息传递到混合中即可。等等，点击处理程序通常会告诉您点击的来源（这里有您的上下文信息），特别是在使用jQuery框架时

因此，不是：

<form onsubmit="doSubmit()" ...>
<input type="submit" onclick="updateSourceTo('cancel');" ... />
<input type="submit" onclick="updateSourceTo('submit');" ... />



使用：



或者，如果要通过查看单击事件目标来检测源：

<form ...>
<input type="button" onclick="handleSubmitButtonClick();" ... />
<input type="button" onclick="handleSubmitButtonClick();" ... />



对于handleSubmitButtonClick的细节，我应该提到和类似jQuery的东西

我承认，遵循submit范式促进了某种形式处理的纯粹主义，但在我看来，你已经用t进入了非纯粹主义的领域
<form method="post">
 <button type="submit" id=cancel name="command" value="cancel" onclick="document.getElementByid('submit').remove();submitClick(this);">Cancel Order</button>
 <button type="submit" id=submit name="command" value="proceed" onclick="document.getElementByid('cancel').remove();submitClick(this);">Save Order</button>
</form>

<form method="post" onsubmit="return ajaxSubmit(this);" id="theForm">
 <input type="radio" name="command" value="cancel" id="cancel" onClick="document.getElementById('theForm').submit();">
 <label for="cancel">Cancel Order</label>

 <input type="radio" name="command" value="proceed" id="proceed" onClick="document.getElementById('theForm').submit();">
 <label for="proceed">Save Order</label>
</form>

<form onsubmit="doSubmit()" ...>
<input type="submit" onclick="updateSourceTo('cancel');" ... />
<input type="submit" onclick="updateSourceTo('submit');" ... />

<form ...>
<input type="button" onclick="doSubmit('cancel');" ... />
<input type="button" onclick="doSubmit('submit');" ... />

<form ...>
<input type="button" onclick="handleSubmitButtonClick();" ... />
<input type="button" onclick="handleSubmitButtonClick();" ... />