Copied to clipboard

Flag this post as spam?

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


  • Christian Lübeck 2 posts 72 karma points
    Mar 07, 2023 @ 09:44
    Christian Lübeck
    0

    Avoid Postback/Page Reload with Umbraco Forms

    Hi there, just wondering whether there is a simple way to avoid a full postback/page reload with out-of-the-box Umbraco Forms (currently version 11.0.2)

    I believe in ASP.net there used to be a feature of partial page reload.

    We would like to create a form at the bottom of an existing page, using multiple pages. The page reload is ugly, and moves to the top of the page again.

    Documentation only refers to an API for a do-it-yourself solution, which i feel is a bit beyond my needs.

    Thanks for any hints! Cheers, Christian

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 07, 2023 @ 10:20
    Huw Reddick
    0

    you could use a javascript to do an ajax post rather then letting the form submit by itself, that way you should be able to do a partial update.

  • Christian Lübeck 2 posts 72 karma points
    Mar 07, 2023 @ 12:44
    Christian Lübeck
    0

    Thanks Huw! Is there an easy way to achieve this? Any boilerplate code from umbraco forms? Kind Regards

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 07, 2023 @ 13:29
    Huw Reddick
    0

    I've not used umbraco forms myself, but something like this should work

    $(document).on("submit","#IDOFYOURFORM", function(event){
        event.preventDefault();
        var formValues= $(this).serialize();
    
        $.ajax({
            url: $(this).attr("action"),
            type: "POST",
            data: formValues
            , success: function (data) {
                if (data) {
                    //this is whare you update your page.
                    $("#form-outer-cases").html(data);
                } else {
                    console.log('error: no data returned');
                }
            }, error: function (xhr) {
                console.log('Error: ', xhr.status + ' (' + xhr.statusText + ')');
            }
        }); 
    
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft