Here's one way, with AJAX:

Update: To clarify, this mainly shows how to do the form submission asynchronously - you can always modify this code so that it, for example, redirects to a different page when the form submission is complete, to show a "spinner" image instead of the "Submitting" message, and so on. /Update

#!/usr/bin/env perl
use Mojolicious::Lite -signatures;

get '/' => sub ($c) {
    $c->render(template => 'index');
} => 'index';

post '/submit' => sub ($c) {
    $c->render_later;
    Mojo::IOLoop->timer(10 => sub { # simulate long process
        if ( $c->param('foo') =~ /foo/i ) {
            $c->render(json => { ok=>1, message=>"All good" });
        }
        else {
            $c->render(json => { ok=>0, message=>"Bad foo value" });
        }
    });
} => 'formsubmit';

app->start;

__DATA__

@@ layouts/main.html.ep
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body>
%= content
</body>
</html>

@@ index.html.ep
% layout 'main', title => 'Hello, World!';
<div>
%= form_for formsubmit => ( method=>'post', id=>'myform' ) => begin
<div>
%= label_for foo => 'Foo'
%= text_field foo => ( placeholder=>"Foo", required=>'required' )
(must contain "foo")
</div><div>
%= label_for bar => 'Bar'
%= text_field bar => ( placeholder=>"Bar" )
</div><div>
%= submit_button 'Login'
<span id="formmessage"></span>
</div>
%= end
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
<script>
$(function () {
    $('#myform').on('submit', function (e) {
        e.preventDefault();
        var thedata = $('#myform').serialize(); // before disabling!
        $("#formmessage").text("Submitting, please wait...");
        $("#myform :input").prop("disabled", true);
        $.ajax({ type: 'post', url: '<%= url_for 'formsubmit' %>',
            data: thedata, timeout: 120*1000 })
            .done( function( data ) {
                if (data.ok) {
                    alert("Form was submitted: "+data.message);
                }
                else {
                    alert("Problem with submission: "+data.message);
                }
            })
            .fail( function( jqXHR, textStatus, errorThrown ) {
                alert("Form submission error: "+textStatus
                    +" / "+jqXHR.status+" "+errorThrown);
            })
            .always( function () {
                $("#formmessage").text("");
                $("#myform :input").prop("disabled", false);
            });
    });
});
</script>

[download]

In reply to Re: Mojolicious waiting page by haukex
in thread Mojolicious waiting page by bartrad

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.