Answers.Body: <p>I figured it out (edited with my FORM mark-up as well):</p>
  
  <p>I'm actually rendering the FORM using the SproutForms method:</p>
  
  <pre><code>&lt;div class="submit-via-ajax"&gt;
      {{ craft.sproutForms.displayForm(block.gatedContentForm.first().handle) }}
  &lt;/div&gt;
  </code></pre>
  
  <p>and then my JS looks for any form submissions from a ".submit-via-ajax" block</p>
  
  <pre><code>// process the form
  $('.submit-via-ajax form').submit(function(event) {
  
      // get the form data
      var formData = $(this).serialize();
  
      // process the form
      $.ajax({
          type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
          url         : 'sproutForms/entries/saveEntry', // the url where we want to POST
          data        : formData, // our data object
          dataType    : 'json', // what type of data do we expect back from the server
          encode          : true
      })
          // using the done promise callback
          .done(function(data) {
  
              // here we will handle errors and validation messages
              if (data.success == true)
              {
                  // show/hide content/elements
              }
              else
              {
                  // show an error
              }
      });
  
      // stop the form from submitting the normal way and refreshing the page
      event.preventDefault();
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-25T17:48:43.457Z
Answers.Text: Glad you figured it out. We'll consider adding an example to the docs. As you've shown here, the general principles of submitting Sprout Forms over ajax are the same as any other form you'd submit over ajax, we aren't doing anything fancy there and Sprout Forms will give you back a response in json to work with as necessary.
Answers.UserDisplayName: Ben Parizek
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-18T06:07:52.360Z
Answers.Text: carbonjoetunis, would you be willing to share your Form code, as I am attempting the same (just Ajax submission at this stage) but having some troubles.
Answers.UserDisplayName: Nutmeg
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-25T15:52:18.227Z
Answers.Text: edited the original post to include how i'm rendering the FORM mark-up.
Answers.UserDisplayName: carbonjoetunis
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-04-25T05:33:00.527Z
Answers.LastActivityDate: 2016-10-25T15:50:45.723Z
Answers.LastEditDate: 2016-10-25T15:50:45.723Z
Answers.UserDisplayName: carbonjoetunis
Body: <p>I need to submit a form, using SproutForms, via AJAX, so i can get the response and then show some "gated" content on the page. The content (i.e. PDF link, etc) is tied to a particular entry page, so i'd like to stay on that page and not doing a normal POST to a generic success page. I can't find any info on the SproutForms plugin page on how to do this, just that it's supported (noted in the change log). Please help</p>
  
Tags: <plugin-sproutforms>
Title: Ajax submissions using SproutForms
ThreadText: # Ajax submissions using SproutForms
  
  (Asked by: username_0 on 2016-04-24)
  
  I need to submit a form, using SproutForms, via AJAX, so i can get the response and then show some "gated" content on the page. The content (i.e. PDF link, etc) is tied to a particular entry page, so i'd like to stay on that page and not doing a normal POST to a generic success page. I can't find any info on the SproutForms plugin page on how to do this, just that it's supported (noted in the change log). Please help
  
  **Tags:** plugin-sproutforms
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2016-04-25. Score: 5
  
  I figured it out (edited with my FORM mark-up as well):
  
  I'm actually rendering the FORM using the SproutForms method:
  
  ```
  <div class="submit-via-ajax">
      {{ craft.sproutForms.displayForm(block.gatedContentForm.first().handle) }}
  </div>
  
  ```
  
  and then my JS looks for any form submissions from a ".submit-via-ajax" block
  
  ```
  // process the form
  $('.submit-via-ajax form').submit(function(event) {
  
      // get the form data
      var formData = $(this).serialize();
  
      // process the form
      $.ajax({
          type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
          url         : 'sproutForms/entries/saveEntry', // the url where we want to POST
          data        : formData, // our data object
          dataType    : 'json', // what type of data do we expect back from the server
          encode          : true
      })
          // using the done promise callback
          .done(function(data) {
  
              // here we will handle errors and validation messages
              if (data.success == true)
              {
                  // show/hide content/elements
              }
              else
              {
                  // show an error
              }
      });
  
      // stop the form from submitting the normal way and refreshing the page
      event.preventDefault();
  });
  
  ```
  
  > **Comments:**
  > **username_1**: Glad you figured it out. We'll consider adding an example to the docs. As you've shown here, the general principles of submitting Sprout Forms over ajax are the same as any other form you'd submit over ajax, we aren't doing anything fancy there and Sprout Forms will give you back a response in json to work with as necessary.  
  > **username_2**: username_0, would you be willing to share your Form code, as I am attempting the same (just Ajax submission at this stage) but having some troubles.  
  > **username_0**: edited the original post to include how i'm rendering the FORM mark-up.  
  
  ---
  
  