Question

I am seeing a weird behavior when I POST using AJAX. When I have the following code,

    <a id="submit" class= "btn btn-large btn-primary">Sign Up</a> (form submit)
$('#submit').on('click', function(){
console.log($('#biz_details').serialize());
    $('#status').css('display','block');
    $.post('/business/signup',$('#biz_details').serialize(), function(data){
        $('#updated').text('Success.').append('<a href="/business/profile">     here to view profile </a>');
}
 ,'json');
});

things seem to work fine. However, when I use

    <submit id="submit" class= "btn btn-large btn-primary">Sign Up</submit> (form submit)

instead of the <a> tag, I get error: [Errno 32] Broken pipe. Also, I am redirected to
the same URL (\business\signup) but with my POST parameters being sent as GET.
To illustrate, if I were POSTing a=1&b=2, I am redirected to \business\signup?a=1&b=2.
My form declaration is

    <form class="holder form-horizontal" id="biz_details"  style= "background-color: white;overflow-y:hidden;">

Further, if I do have an action attribute to my form and have a js call in the action to the POST function, it works fine.
Can anyone throw some light on this behavior, especially the one about redirects?

Answer 1

In order for the function to work correctly with the submit button, you have to disable the default action for the form, and since you haven’t defined a METHOD, the default (GET) is used.

To disable the default action, simply add a return false at the end of the function that is trigged on the form submit.

$('#myform').submit(function() {
   // do something
   return false;
});