<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>

CC BY-SA 3.0
2016-04-25T17:48:43.457Z
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.
Ben Parizek
CC BY-SA 3.0
2016-10-18T06:07:52.360Z
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.
Nutmeg
CC BY-SA 3.0
2016-10-25T15:52:18.227Z
edited the original post to include how i'm rendering the FORM mark-up.
carbonjoetunis
CC BY-SA 3.0
2016-04-25T05:33:00.527Z
2016-10-25T15:50:45.723Z
2016-10-25T15:50:45.723Z
carbonjoetunis
<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>

<plugin-sproutforms>
Ajax submissions using SproutForms
# 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:

    {{ craft.sproutForms.displayForm(block.gatedContentForm.first().handle) }}


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.  

---

