Ajax forms didn't submit

I have very simple script for submitting the form. This is html template:

 <table>
    <form action='.' method = 'post' id='form'>{% csrf_token %}
      {{ formset }}
      <tr><td><button type='button' id='button' value='view'>shsfj</button></td></tr>               
    </form>
 </table>
 <div id='right-here'></div>

And this is js:

<script type='text/javascript' language='JavaScript'>
    
  $('#button').click(function(){
      $.get('/json', function(data){
      $('#right-here').replaceWith(
          "<div id='right-here'>"+data+"</div>"
      );              开发者_C百科                  
      });
      $("#form").ajaxForm(function(){
          alert("It's ok");
          });
  });
</script>

So I have no alert. This means the form is not passed to the server? What is wrong? The get() function takes data from another view, this is different story.

The ".ajaxForm()" method simply initializes the form. The form has to be submitted in order for anything to really happen.

You should put the call to ".ajaxForm()" in a "ready" handler, and then have the "click" handler simply call "submit()":

$(function() {
  $('#form').ajaxForm(function() { alert("Ok"); });
});

$('#button').click(function(){
  $.get('/json', function(data){
  $('#right-here').replaceWith(
      "<div id='right-here'>"+data+"</div>"
  );                                
  });
  $("#form").submit();
});

Alternatively, you can do the initialization and the submitting in one step by using ".ajaxSubmit()".