Submit WFFM via javascript ajax post without reloading the page?

Question

I have a WFFM form on a page that has a lot of dynamic content. When the form is submitted, the page reloads (as a postback) to display the success message, which also reloads all of the content on the page and resets the state of the page for the user. I need to be able to submit the form without resetting the state of the page, so I'm trying to submit the form with an ajax post request and show a success or error message based on the response:

$("form").unbind().on("submit", function (e) {
  e.preventDefault();
  var form = $(this);
  var submitUrl = $(form).attr("action");
  var data = $(form).serializeAndEncode();
  var deferred = $.post(submitUrl, data);
  $("form").submit();
  deferred.success(function (e) {
    $(".sucess-message").show();
  });
  deferred.error(function (e) {
    alert("Oops! Something went wrong. Please try again later.");
  });
});

});

The javascript is hitting the success code, but I don't think it's actually working. The value of e in deferred.success in an HTML body that has no content in it that indicates the submit succeeded (I don't see my success message in the body), and I checked the form data in Sitecore and do not see my submission data. It might matter that there are two forms on this page, but this was also the case for a test page where this was the only form. Is there any way that I can submit this form with javascript without reloading the page, and determine when the form has completed submitting/if it was a success?