title: jquery: ajax POST inside a form - prevent form submission on ajax call
body: <p>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:</p>
  
  <pre><code>jQuery.ajax({
       type: "POST",
       url: "my_custom/url",
       dataType: "html",
       data: {"text": jQuery("#edit-body").html()
        },
       success: function(result){
          console.log(result);
       }
      });  
  </code></pre>
  
  <p>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?</p>
  
  <p>Here is the full code as requested</p>
  
  <pre><code>        jQuery("#edit-body").before('&lt;div id="proofread_bot-button-holder"&gt;&lt;button type="button"  id="proofread_bot-submit" onclick="return false;"&gt;Check with Proofread Bot&lt;/button&gt;&lt;/div&gt;'); 
      jQuery("#proofread_bot-submit").click(function(event){
        event.preventDefault();
        jQuery("#proofread_bot-button-holder").append("&lt;img id=\"proofread_bot_throbber\" src=\"sites/all/modules/proofread_bot/images/throbber.gif\" /&gt;");
  
        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(); 
           }
          });    
        });
  </code></pre>