jQuery serializeArray不包含单击的提交按钮

时间:2010-10-24 11:00:43

标签: jquery serialization w3c form-submit

我有一个有两个按钮的表单。一个用于保存记录,另一个用于取消保存过程。我正在使用rails.js (一个常见的AJAX / jQuery插件,适用于那些不知情的人) javascript文件,可以与jQuery一起使用,用于不引人注目的javascript / ajax调用。当我通过ajax发送表单数据时,我希望我单击的按钮的名称和值与其余数据一起提交,以便我可以根据点击的按钮决定做什么。

rails.js文件中的方法使用.serializeArray()将表单数据发送到服务器。问题是这不包括我点击的按钮的名称/值对。 jQuery的网站声明他们是故意这样做的(尽管我认为他们应该这样做):

.serializeArray()方法使用successful controls的标准W3C规则来确定它应包含哪些元素;特别是该元素不能被禁用,并且必须包含name属性。没有提交按钮值被序列化因为表格没有使用按钮提交。“

他们如何假设某个表单未使用按钮提交?我认为这没有任何意义和错误的假设。

根据W3C规则,为提交表单而激活的按钮被视为成功控制

由于jQuery的开发人员已经决定故意这样做,我可以假设还有另一种方法不会排除序列化中的激活按钮吗?

编辑:以下是我的表单可能的简单示例......

<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#form').submit(function(e) {
      // put your breakpoint here to look at e
      var x = 0;
    });
  });
</script>
</head>
<body>
  <form id="form">
    <input name="name" type="text"><br/>
    <input name="commit" type="submit" value="Save"/>
    <input name="commit" type="submit" value="Cancel"/>
  </form>
</body>

5 个答案:

答案 0 :(得分:66)

没有,行为基于 submit的{​​{1}}事件,而不是按钮的 ,例如在JavaScript中输入或调用.submit()。你在这里混合了2个概念,.serialize().serializeArray()可能会或可能没有任何来点击按钮 - 它只是一个单独的事件,它们是未连接。这些方法的级别高于:您可以出于任何原因随时序列化表单(或其子集)。

但是,如果您从按钮提交,则可以添加提交名称/值对,就像从该按钮提交的普通表单一样:

<form>

答案 1 :(得分:5)

我使用以下代码段,基本上添加了一个同名的隐藏元素

 var form = $("form");
 $(":submit",form).click(function(){
            if($(this).attr('name')) {
                $(form).append(
                    $("<input type='hidden'>").attr( { 
                        name: $(this).attr('name'), 
                        value: $(this).attr('value') })
                );
            }
        });

 $(form).submit(function(){
     console.log($(this).serializeArray());
 });

答案 2 :(得分:4)

解决这个问题的巧妙方法:

<form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>

答案 3 :(得分:3)

此解决方案是“通用的”,因为它将处理所有输入提交,在提交时将每个提交作为表单变量传递。

$(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});

答案 4 :(得分:0)

    var form = button.closest('form');
    var serialize = form.serialize();

    if (button.attr('name') !== undefined) {
        serialize += '&'+button.attr('name')+'=';
    }