Serialize form not working in jQuery

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.