Jquery / ajax form does not pass button data

Question

I thought the HTML specification indicated that the buttons on the form convey their meaning, and the “not pressed” button did not pass. Like the checkboxes ... I always check the value of the button, and sometimes I will do other processing depending on which button was used for sending.

I started using AJAX (specifically jquery) to submit my form data, but the button data is NEVER transmitted - is there something I am missing? is there something i can do to pass this 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 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> 

On the processing page - the "header" field ONLY appears, neither btnA nor btnB, regardless of what is pressed ...

if it cannot be “fixed”, can someone explain why the Ajax call does not conform to the “standard” behaviors?

THX

Answer 1

I found this to be an interesting problem, so I decided that I would work a bit in the jquery source code and the api documentation.

My findings:

Your problem has nothing to do with ajax call and everything related to the $.serialize() function. It just isn't encoded to return <input type="submit"> or even <button type="submit"> , I tried both. There is a regular expression expression that runs against multiple elements in a form that needs to be serialized, and it arbitrarily excludes the submit button, unfortunately.

JQuery source code (I am modified for debugging purposes, but everything is still semantically untouched):

 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; } 

Now, while studying jQuery documentation, you meet all the requirements for it as you need (http://api.jquery.com/serialize/):

Note. Only " successful controls " are serialized into a string. The submit button value is not serialized because the form was not submitted using the button. For the value of the form element to be included in the serialized string, the element must have a name attribute. Values ​​from checkboxes and radio buttons (radio or flag inputs) are only included if they are checked. Data from file selection items is not serialized.

"The successful management link is associated with the W3 specification, and you definitely nailed the expected behavior in the specification.

Short lame answer: I think it is broken! Report a bug!

Answer 2

I had a rather unusual problem. I am working on a project and have two separate php pages that have html on the page, separate from the php code, and one of them is an echo of the html from the internal php code. When I use .serialize on a one that has separate html code, it works correctly. It sends the value of the submit button to its ajax call to another php page. But with html, an echo from the php script, I am trying to do the same and get completely different results. It will send all other information in the form, but not the value of the submit button. All I need to send is whether I deleted Delete or Update. I do not ask for help (violating the rules for asking for help in another post), but I thought that this information could be useful in determining where the failure occurs. I will look for a solution and publish it here if I come up with something.