{"id":647,"date":"2014-08-17T19:39:06","date_gmt":"2014-08-17T19:39:06","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=647"},"modified":"2015-08-17T10:58:28","modified_gmt":"2015-08-17T10:58:28","slug":"serialize-form-not-working-in-jquery","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/serialize-form-not-working-in-jquery\/","title":{"rendered":"Serialize form not working in jQuery"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

So, my question<\/a>\u00a0was if, for example, we have this HTML form code:<\/span><\/p>\n

<form action=\"#\" id=\"gamesForm\">\r\n    <p>                                                        \r\n        <input id=\"gName\" type=\"text\" class=\"medium\" \/>\r\n        <span class=\"notification information\">Game name<\/span>\r\n    <\/p>\r\n\r\n    <p>                            \r\n        <span class=\"notification information\">Enabled:<\/span>\r\n        <input id=\"gEnabled\" type=\"checkbox\" \/>              \r\n    <\/p>\r\n\r\n\r\n    <br \/>\r\n    <!--Additional data for extra type-->\r\n    <div id=\"extraAdditionalData\" class=\"hidden\">                            \r\n        <p>\r\n            <input id=\"rRacers\" type=\"text\" class=\"medium\" \/>\r\n            <span class=\"notification information\">Racers<\/span>\r\n        <\/p>\r\n\r\n        <p>\r\n            <input id=\"rVideoSet\" type=\"text\" class=\"medium\" \/>\r\n            <span class=\"notification information\">Video set<\/span>\r\n        <\/p>                                                         \r\n     <\/div>                \r\n<\/form>\r\n\r\n<a href=\"#\" id=\"saveConfiguration\" class=\"graybuttonBig\">Save everything!<\/a><\/pre>\n
And this js code:<\/p>\n
$(document).ready(function(){\r\n    $(\"#saveConfiguration\").click(function(){\r\n        alert( $(\"form\").serialize() );   \r\n    });\r\n});<\/pre>\n
How come that all I get in the alert is an empty string?<\/p>\n
The answer, by user Felix Kling, was:<\/p>\n
You have to give your form elements\u00a0name<\/code>s!<\/p>\n
This is independent of jQuery. Every form element must have a\u00a0name<\/code>\u00a0to be considered for form submission as\u00a0successful control<\/em><\/a>:<\/p>\n
A successful control is “valid” for submission. Every successful control has its\u00a0control name<\/a>\u00a0paired with its\u00a0current value<\/a>\u00a0as part of the submitted\u00a0form data set<\/a>. A successful control must be defined within a\u00a0FORM<\/code><\/a>\u00a0element and must have a\u00a0control name<\/a>.<\/p><\/blockquote>\n
jQuery just ignores those elements that don’t have a name (or, depending on how it gets the elements, it might not even see them as the form itself has no reference to them).<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":1717,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions\/1717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}