Question

我认为HTML规范声明按钮在表单中单击会传递其值，并且“未点击”按钮未通过。像复选框...我总是检查按钮值，有时我会根据用于提交的按钮进行不同的处理..

我已经开始使用AJAX（特别是jquery）来提交我的表单数据 - 但是按钮数据永远不会传递 - 有什么我想念的吗？我能做些什么来传递这些数据？

简单代码可能看起来像这样

<form id="frmPost" method="post" action="page.php" class="bbForm" >
<input type="text" name="heading" id="heading" />   
<input type="submit" name="btnA" value="Process It!" />
<input type="submit" name="btnB" value="Re-rout it somewhere Else!" />
</form>
<script>
$( function() { //once the doc has loaded   
//handle the forms
$( '.bbForm' ).live( 'submit', function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $( this ).serialize(), // get the form data
        type: $( this ).attr( 'method' ), // GET or POST
        url:  $( this ).attr( 'action' ), // the file to call
        success: function( response ) { // on success..
            $('#ui-tabs-1').html( response );   
        }           
    });
    return false; // cancel original event to prevent form submitting
});
});
</script>

在处理页面上 - 只显示“标题”字段，btnA或btnB都不会被点击...

如果无法“修复”，有人可以解释为什么Ajax调用不遵循“标准”形式行为吗？

THX

Answer 1

我发现这是一个有趣的问题，所以我想我会挖掘一下jquery源代码和api文档。

我的发现：

您的问题与ajax调用无关，而与$.serialize()函数有关。它只是没有编码返回<input type="submit">甚至<button type="submit">我尝试了两者。有一个正则表达式针对要序列化的表单中的元素集运行，并且不幸地任意排除了提交按钮。

jQuery源代码（我为了调试目的而进行了修改，但所有内容仍然完整无缺）：

serialize: function() {
    var data = jQuery.param( this.serializeArray() );
            return data;
},

serializeArray: function() {
   var elementMap = this.map(function(){
        return this.elements ? jQuery.makeArray( this.elements ) : this;
    });

   var filtered = elementMap.filter(function(){
                    var regexTest1= rselectTextarea.test( this.nodeName );
                    var regexTest2 = rinput.test( this.type ); //input submit will fail here thus never serialized as part of the form
        var output = this.name && !this.disabled &&
            ( this.checked || regexTest2|| regexTest2);
                    return output;
    });

    var output = filtered.map(function( i, elem ){
        var val = jQuery( this ).val();

        return val == null ?
            null :
            jQuery.isArray( val ) ?
                jQuery.map( val, function( val, i ){
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                }) :
                { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
    }).get();
    return output;
}

现在检查jQuery文档，您可以满足它的所有要求（http://api.jquery.com/serialize/）：

注意：只有“successful controls”序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交。 要使表单元素的值包含在序列化字符串中，该元素必须具有name属性。复选框和单选按钮（“radio”或“checkbox”类型的输入）中的值仅包含在他们被检查。来自文件选择元素的数据未被序列化。

“成功的控制链接分支到W3规范，你肯定在规范上指出了预期的行为。

蹩脚的蹩脚回答：我觉得它已经坏了！报告错误修复!!!

Answer 2

我遇到了一个相当不寻常的问题。我正在研究一个项目并有两个单独的php页面，其中一个页面上的html与php代码分开，一个是从php代码中回显html。当我在具有单独的html代码的那个上使用.serialize时，它可以正常工作。它将我的提交按钮值在其ajax调用中发送到另一个php页面。但是在与PHP脚本回应的html中我尝试做同样的事情并得到完全不同的结果。它将发送表单中的所有其他信息，但不会发送提交按钮的值。我需要它做的就是发送我是否按“删除”或“更新”。我不是在寻求帮助（违反了在另一个人的帖子上寻求帮助的规则），但我认为这些信息可能有助于确定故障发生的位置。我会寻找一个解决方案，如果我发现任何问题，我会在这里回复。

jquery / ajax表单不传递按钮数据

2 个答案: