jquery / ajax表单不传递按钮数据 [英] jquery / ajax form not passing button data

问题描述

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

I thought the HTML spec stated that buttons click in a form pass their value, and button "not clicked" did not get passed. Like check boxes... I always check for the button value and sometimes I'll do different processing depending on which button was used to submit..

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

I have started using AJAX (specifically jquery) to submit my form data - but the button data is NEVER passed - is there something I'm missing? is there soemthing I can do to pass that data?

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

simple code might look like this

<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，无论以哪个为准单击...

On the processing page - ONLY the "heading" field appears, neither the btnA or btnB regardless of whichever is clicked...

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

if it can't be 'fixed' can someone explain why the Ajax call doesn't follow "standard" form behavior?

thx

推荐答案

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

I found this to be an interesting issue so I figured I would do a bit of digging into the jquery source code and api documentation.

我的发现：

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

Your issue has nothing to do with an ajax call and everything to do with the $.serialize() function. It simply is not coded to return <input type="submit"> or even <button type="submit"> I tried both. There is a regex expression that is run against the set of elements in the form to be serialized and it arbitrarily excludes the submit button unfortunately.

jQuery源代码（我修改为调试目的，但一切仍然在语义上完整）：

jQuery source code (I modified for debugging purposes but everything is still semantically intact):

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/）：

Now examining the jQuery documentation, you meet all the requirements for it to behave as expected (http://api.jquery.com/serialize/):

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

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

成功的控制链接分支到W3规范，你肯定已经确定了预期的行为在规格上。

the "successful controls link branches out to the W3 spec and you definitely nailed the expected behavior on the spec.

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

这篇关于jquery / ajax表单不传递按钮数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！