使用JavaScript访问"发布"数据或检查用于提交表单的提交按钮

Question

考虑一个带有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>

提交后,服务器将通过检查值来知道用于提交表单的提交按钮command.大!

在这种情况下,我使用onsubmit表单的事件处理程序来预处理并通过AJAX发送表单数据.像这样:<form method="post" onsubmit="return ajaxSubmit(this);">

我正在使用此ajaxSubmit函数作为检查任何提供的表单元素并通过Ajax发送数据的一般方法.这可以很好地确定文本字段的值,如果复选框被"选中",在一个组中选择了哪个无线电等等.它唯一出错的地方(因为我不知道如何检查这个)是哪个提交按钮用于提交表单.即没有任何东西myForm["command"]可以告诉我们实际使用了哪两个命令按钮.

相反,有没有办法访问服务器在发送之前使用JavaScript接收的相同"post"数据？

否则,这只是我需要解决的一个缺陷吗？什么是最好的方式？

编辑: 由于所有现代浏览器都会传递用于提交表单的按钮的名称/值(以及其他相关部分,例如从组中选择哪个选项,选中复选框名称/值等),任何人都可以解释为什么那里在将数据发送到服务器之前无法直接访问此数据？我们不应该有这样的理由吗？

Answer 1

相反,有没有办法访问服务器在发送之前使用JavaScript接收的相同"post"数据？

不是那么确切的数据,没有.

知道submit按下哪个按钮的常用方法是(不幸的是)将click处理程序附加到按钮并让它们设置变量(或hidden字段的值),然后您可以在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>

...... submitClick看起来像这样:

function submitClick(button) {
    button.form.submitclicked.value = button.value;
}

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

为了清楚onclick起见,您不必在每个元素上指定属性,我上面这样做的唯一原因是因为您使用的是DOM0处理程序.

处理它的更好方法是使用事件冒泡.由于click事件从其后代控件(包括提交按钮)冒泡到表单,您可以在表单上挂钩事件,然后查看它是否出现在提交按钮上,如果是,那么该按钮value是什么.

例如,这里有一个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[并早于它] 的内容大致相同):

document.getElementById("theForm").addEventListener("click", function(e) {
  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
}, false);

实例 | 资源

或者使用库来使它更容易(这里是jQuery,但大多数都有这个功能,称为事件委托):

$("#theForm").delegate("input[type=submit]", "click", function() {
  alert(this.value);
  return false;
});

实例 | Source(我在delegate那里使用因为我喜欢清晰度;使用最新版本的jQuery,你可以使用超重载on,但不太清楚.如果你选择,请注意参数的顺序是不同的.)

这里的重点是它并不复杂,困难或特别麻烦.

重新编辑您的编辑结束问题:

...任何人都可以解释为什么在将数据发送到服务器之前无法直接访问这些数据？

可能不是,不.重要的是要了解很多这些东西才刚刚发展起来.与表单一起发送的提交按钮的值是一个HTML的东西,显然在做DOM HTML表单模块时,任何人都没有说"嘿,我们应该在表单上只存在一个属性提交事件,告诉您提交表单的内容." 它可能应该发生在某人身上,但显然,事实并非如此.