Serialize form not working in jQuery

Can you please take a look and help me realize where am I going wrong with this? Here is the jsfiddle link: http://jsfiddle.net/Hitman666/QcEkj/1/ but also here is that code

HTML:

<form action="#" id="gamesForm">
    <p>                                                        
        <input id="gName" type="text" class="medium" />
        <span class="notification information">Game name</span>
    </p>

    <p>                            
        <span class="notification information">Enabled:</span>
        <input id="gEnabled" type="checkbox" />              
    </p>

    <br />
    <!--Additional data for extra type-->
    <div id="extraAdditionalData" class="hidden">                            
        <p>
            <input id="rRacers" type="text" class="medium" />
            <span class="notification information">Racers</span>
        </p>
                       
        <p>
            <input id="rVideoSet" type="text" class="medium" />
            <span class="notification information">Video set</span>
        </p>                                                         
     </div>                
</form>
            
<a href="#" id="saveConfiguration" class="graybuttonBig">Save everything!</a> 

JavaScript:

$(document).ready(function(){
    $("#saveConfiguration").click(function(){
        alert( $("form").serialize() );   
    });
});  

All I'm getting is an empty string.

You have to give your form elements names!

This is independent of jQuery. Every form element must have a name to be considered for form submission as successful control:

> A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

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).

Something else that prevents serializeArray() from serializing properly is disabled inputs. serializeArray does not serialise disabled inputs, in much the same way that disabled inputs are not submitted with the form.

> A successful control is "valid" for submission. > > - Controls that are disabled cannot be successful.

Source

Please add a name to your input field:

<input type='text' name='give_some_name' />

In this fiddle I have added a name and it is working fine.

I think the problem is that you're trying to select form like

$("form");

But this is equivalent to

getElementsByTagName("form");

This returns an array of objects.
So, instead you can use the #id selector, or use the index to access the form. Hope this helps.

First of all, you need to give name attribute to all input controls like textboxes etc. Then please check whether your id's are clashing or not, I had the same id for form and the one section that's where my problem was.

You have not referenced the form correctly in your javascript

Try changing to this:

$('#gamesForm').serialize();

Be careful not to put a form inside another form.

Obviously op has not but this could easily happen with modules and partials been placed incorrectly

I must share my research, first of all, if you want to get all value from a form, please add:

<form method="post" name="MUST_ASSIGN" id="form">
...

name="MUST_ASSIGN" must be presented, and DO NOT duplicate form's ID.

Second: disable input can NOT be get. If you disable all input field before form.serialize(), you will get NOTHING.

This code is valid:

...
var Allinput = $('#form').serialize();
$(_self).find('input').prop('disabled', 'disabled');
...

But this code is get nothing:

$(_self).find('input').prop('disabled', 'disabled');
var Allinput = $('#form').serialize();

Good day!