{% extends "demo/_layout" %}

{% set pageTitle = "Alternate Success Markup from Div after AJAX Submit | Extras" %}

{# Replace 'freeformAjaxDivSuccess' with your form handle #}
{% set demoFormHandle = "freeformAjaxDivSuccess" %}

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

    <div class="freeform-page-heading">
        <h2>Alternate Success Markup from Div after AJAX Submit</h2>
        <p>The following example will override the default AJAX success message and load a success message from a <code>div</code> instead.</p>
    </div>

    {% if form %}

        <div class="freeform-success{{ colorMode == "dark" ? " freeform-notice-dark" }}" style="display:none;">
            <h4>Thank you!</h4>
            <p>
                We have received your submission. You may now <a href="{{ siteUrl('#') }}">download the PDF guide</a>.
            </p>
        </div>

        <div id="extras-form-wrapper">
            {{ form.render }}
        </div>

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or your test form:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
            </ol>
        </p>
        <p class="extras-instructions-warning">
            Please note that using the <b>Load Success Template</b> option for the <b>Success Behavior</b> setting will override this. It's also worth noting that feature supersedes this approach.
        </p>
    </div>

{% endblock %}

{% block footerJs %}

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        document.addEventListener('freeform-render-success', function (event) {
            // Disable the default success rendering
            event.preventDefault();

            // We locate the 'form-wrapper' DIV element which contains our form
            // and we swap its contents (the whole form) with the HTML that we
            // fetch from any other element already present on the page
            $('#extras-form-wrapper').html($('.extras-custom-content').html());
        });
    </script>

{% endblock %}