Best IT Recipes

JQuery serializeArray does not include the submit button that was clicked

I have a form that has two buttons. One to save the record, and the other to cancel the save procedure. I use rails.js (a regular AJAX / jQuery plugin for those of you who don’t know) a javascript file that works with jQuery for unobtrusive javascript / ajax calls. When I submit form data via ajax, I want the name and value of the button I clicked to be sent along with the rest of the data so that I can decide what to do based on which button was clicked.

The method in the rails.js file uses .serializeArray() to send form data to the server. The problem is that this does not include the name / value pair of the button I pressed. The jQuery website says that they do it on purpose (although my opinion is that they should):

"The .serializeArray() method uses standard W3C rules for remote controls to determine which elements it should include, in particular the element cannot be disabled and must contain a name attribute. The submit button value is not serialized because the form was not submitted using the button. "

How can they suggest that the form was not submitted using the button? I suppose this makes no sense and erroneous assumptions.

In accordance with W3C rules, the button that was activated to submit the form is considered a successful control .

Since the jQuery developers decided to do this on purpose, can I assume that there is another method that DOES NOT NOT exclude the activated button in serialization?

EDIT: Here is a quick example of how my form will look ...

 <!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>
+47
jquery serialization w3c form-submit
24 Oct '10 at 11:00
source share
4 answers

No, the behavior is based on the submit <form> event, and not on a button, for example. press enter or call .submit() in javascript. You mix 2 concepts here, .serialize() or .serializeArray() may or may not have anything to do with a button click - this is just a separate event as a whole, they are not related. These methods are at a higher level than this: you can serialize the form (or a subset of it) at any time for any reason.

However, you can add a submit name / value pair, as a regular form submitted from this button, if you submit using the button, for example:

 $("#mySubmit").click(function() { var formData = $(this).closest('form').serializeArray(); formData.push({ name: this.name, value: this.value }); //now use formData, it includes the submit button });
+59
Oct 24 '10 at 11:04 on
source share

I use the following snippet, basically adds a hidden element with the same name

  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()); });
+4
Jun 30 2018-12-12T00:
source share

This solution is "universal" because it will process all your input views, passing them as a form variable when submitted.

 $(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() }); }); }); });
+3
Mar 20 '13 at 21:44
source share
  var form = button.closest('form'); var serialize = form.serialize(); if (button.attr('name') !== undefined) { serialize += '&'+button.attr('name')+'='; }
0
Aug 18 '17 at 20:12
source share


More articles:


All Articles