表单上的Jquery ajax提交不起作用

时间:2011-08-07 09:39:28

标签: javascript jquery

我正在尝试在提交表单时进行一些ajax渲染,但它无法正常工作。当我提交表单时,我会转到提交页面。

我的Jquery:

$('#knappen').click(function(e) {
 var form = $(this).closest('form');
    $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success:function(msg){
    $('#comparecontent').html(msg);
        }
    });
                                return false;
});

我的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>

1 个答案:

答案 0 :(得分:1)

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

//more codes (whatever you are doing)
}

http://jsfiddle.net/xkgsR/