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>
my js code:
$(document).ready(function(){
$("#saveConfiguration").click(function(){
alert( $("form").serialize() );
});
});
You have to give your form elements name
s!
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).