Jquery ajax on form submit not working [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I am trying to make some ajax rendering when the form is submitted, but it is not working. When I submit the form I go the submit page.

My Jquery:

$('#knappen').click(function(e) {
 var form = $(th开发者_运维百科is).closest('form');
    $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success:function(msg){
    $('#comparecontent').html(msg);
        }
    });
                                return false;
});

My HTML:

<form method="post" action="/companyies/complete" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="put" name="_method"><input type="hidden" value="UJUL3obWhiDbPqn8CucpZFoB7qcAepvPoINy+0yK7gQ=" name="authenticity_token"></div>
<div style="width: 770px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" id="formcontent"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="put" name="_method"><input type="hidden" name="authenticity_token"></div>
<div style="width: 770px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" id="formcontent">
<table cellspacing="0" cellpadding="0" width="770px;">
  <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;">
    <th style="width: 40px;"> </th> 
    <th style="width: 100px;"><a>Feature 1</a></th>
    <th><a>Feature 2</a></th>
    <th>  <a>Feature 3</a></th>
    <th>  <a>Feature 4</a></th>
    <th>  <a>Feature 5</a></th>
    <th>  <a>Feature 6</a></th>
  </tr>
  <tr>
    <td class="checkit"> <input type="checkbox" value="2" name="task_ids[]" id="task_ids_"></td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
</tbody></table>
  <input type="submit" value="Mark as Complete" name="commit" id="knappen">
</div>
</div>
</form>
<div id="comparecontent"></div>

---

$('#knappen').click(function(e) {
e.preventDefault()

//more codes (whatever you are doing)
}

http://jsfiddle.net/xkgsR/