jquery: ajax POST inside a form - prevent form submission on ajax call

Question

I am trying to perform an ajax call inside a form (a Drupal node edit form) , but it seems when performing the call, it submits the form for some reason. Here is a sample code:

jQuery.ajax({
     type: "POST",
     url: "my_custom/url",
     dataType: "html",
     data: {"text": jQuery("#edit-body").html()
      },
     success: function(result){
        console.log(result);
     }
    });  

I can replicate this just by executing it in the console, but I attach this to a button click function inside the form. Any tips on preventing the form from submitting, on a POST ajax call?

Here is the full code as requested

        jQuery("#edit-body").before('<div id="proofread_bot-button-holder"><button type="button"  id="proofread_bot-submit" onclick="return false;">Check with Proofread Bot</button></div>'); 
    jQuery("#proofread_bot-submit").click(function(event){
      event.preventDefault();
      jQuery("#proofread_bot-button-holder").append("<img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" />");

      jQuery.ajax({
         type: "POST",
         url: "proofread_bot/check",
         dataType: "html",
         data: {"text": jQuery("#edit-' . variable_get('proofread_bot_field') . '").html()
          },
         success: function(proofread_result){
            jQuery("#proofread_bot-submit").after(proofread_result);
            jQuery("#proofread_bot_throbber").remove(); 
         }
        });    
      });

Answer 1

You need to override form's onsubmit event to prevent submitting:

$("formSelector").bind('submit', function (e) {
    var isValid = someYourFunctionToCheckIfFormIsValid();
    if (isValid) {
        jQuery.ajax({
            type: "POST",
            url: "my_custom/url",
            dataType: "html",
            data: { "text": jQuery("#edit-body").html()
            },
            success: function (result) {
                console.log(result);
            }
        });
    }
    e.preventDefault();
    return false;
});

By calling

e.preventDefault();
return false;

You prevent synchronous postback from occurring.

UPDATE: If you don't want to override form submit, maybe you could place your button outside of form tag (you can adjust position with css if necessary)?

Answer 2

If you are using a input type="submit" button, then you need to do a return false; at the end of the function to prevent it from submitting.

Another solution is to e.preventDefault() on the button click

$(".button").click(function(e){
    e.preventDefault();
    return false;
});