Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Alex Skrypnyk 4818 posts 17322 karma points MVP 2x admin c-trib
    Sep 20, 2016 @ 17:33
    Alex Skrypnyk
    0

    Ajax Umbraco Forms

    Hi Community,

    What is the best way of doing Ajax Umbraco Forms?

    Is it possible out of the box in latest version?

    Thanks,

    Alex

  • Amir Khan 882 posts 1643 karma points
    Sep 20, 2016 @ 19:32
    Amir Khan
    1

    See the method posted by Thomas here, it works with some simple updates to the main view for the form: https://our.umbraco.org/forum/umbraco-pro/contour/60788-Umbraco-Forms-and-Ajax#comment-233528

  • Alex Skrypnyk 4818 posts 17322 karma points MVP 2x admin c-trib
    Sep 20, 2016 @ 20:10
    Alex Skrypnyk
    0

    Thanks, Amir, nice solution, will try.

    Maybe something easier?

    Thanks

  • Alex Skrypnyk 4818 posts 17322 karma points MVP 2x admin c-trib
    Sep 22, 2016 @ 20:10
    Alex Skrypnyk
    101

    Solved! This code works for me:

    <script type="text/javascript">
            $(document)
                .ready(function() {
                    //Intercept Submit button in order to make ajax call instead of a postback
                    $('#contour_form_@FORMID').preventDoubleSubmission();
                });
    
    // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                e.preventDefault();
    
                var $form = $(this);
    
                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                } else {
                    if ($form.valid()) {
                        // Mark it so that the next submit can be ignored
                        $form.data('submitted', true);
    
                        // Make ajax call form submission
                        $.ajax({
                            url: $form.attr('action'),
                            type: 'POST',
                            cache: false,
                            data: $form.serialize(),
                            success: function (result) {
                                console.log(result);
    
                                var thankYouMessage = $(result).find('.contourMessageOnSubmit');
                                $('#contour_form_@FORMID').html(thankYouMessage);
    
                            }
                        });
                    }
                }
            });
    
            // Keep chainability
            return this;
        };
        </script>
    

    Thanks,

    Alex

Please Sign in or register to post replies

Write your reply to:

Draft