0

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?

  • If you are using the MVC form controller, you can set your form to execute an ajax form submit, checking the Is Ajax Mvc Form form field. – Alessandro Faniuolo Aug 8 at 22:10
  • That's unfortunately not possible with this site as it's webforms only – Erica Stockwell-Alpert Aug 10 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.