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