1. <form>
2. <fieldset>
3.     <legend>Character Groups</legend>
4.     <ul>
5.         <li>
6.             <label for="lowerLetters">Lower Case Letters</label>
7.             <input name="lowerLetters" type="checkbox" checked="checked" required="required" value="on" />
8.         </li>
9.         <li>
10.             <label for="upperLetters">Upper Case Letters</label>
11.             <input name="upperLetters" type="checkbox" checked="checked" required="required" value="on" />
12.         </li>
13.         <li>
14.             <label for="numbers">Numbers</label>
15.             <input name="numbers" type="checkbox" checked="checked" required="required" value="on" />
16.         </li>
17.         <li>
18.             <label for="symbols">Symbols</label>
19.             <input name="symbols" type="checkbox" checked="checked" required="required" value="on" />
20.         </li>
21.     </ul>
22. </fieldset>
23. <fieldset>
24.     <legend>Password Length Settings</legend>
25.     <ul>
26.         <li>
27.             <label for="minimumLength">Minimum Password Length</label>
28.             <input type="text" name="minimumLength" size="3" required="required" value="8" />
29.         </li>
30.         <li>
31.             <label for="maximumLength">Maximum Password Length</label>
32.             <input type="text" name="maximumLength" size="3" required="required" value="12" />
33.         </li>
34.     </ul>
35. </fieldset>
36. <p><input type="submit" value="Generate" /></p>
37. </form>
38. <p><span id="output" /></p>
39. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
40. <script type="text/javascript" src="/resources/ajax.js"></script>

The file ajax.js is quite simple:

1. $(document).ready(function () {
2.     var query = $('form').serialize();
3.     $('form').submit(function () {
4.         $.get('/demo/password', query, function (result) {
5.             $('#output').html(result);
6.             alert(query);
7.         });
8.         return false;
9.     });
10. });

The problem is that the query string that gets sent, as shown by the alert, is  always "lowerLetters=on&upperLetters=on&numbers=on&symbols=on&minimumLength=8&maximumLength=12", regardless of what fields I check/uncheck or edit after the page loads in the live form. In other words, if I load the page, change the "minimumLength" field to "12", and submit the form, it still sends the above string instead of "lowerLetters=on&upperLetters=on&numbers=on&symbols=on&minimumLength=12&maximumLength=12". If I remove the "value=*" attributes in the HTML, the string behaves similarly, except with zero-length strings instead of the specified default values, resulting in the same problem.

Does anyone have any idea what I'm doing incorrectly? I'd be happy to provide any additional information that might be of help. Thanks in advance!