Show Loader when submitting form In laravel collective

Question

Show Loader when submitting form In laravel collective

7.6k Views Asked by Ankita Dobariya At 01 June 2021 at 10:40

I am submitting a form directly without using Ajax request, I want to show loader when getting a response from the backend. How is it possible?

{!! Form::open(['route' => ['patient_signup'], 'method' => 'post', 'name' => 'sign_up_form']) !!}

and in controller

public function patient_signup()
{
    if ($result) {
        return redirect(route('home'))->with('success', $message);
    } else {
        return Redirect::back()->withInput()->with('error', $message);
    }
}

Everything working fine but I want to show loader when getting a response from the backend. Please provide me a better solution.

Original Q&A

There are 2 best solutions below

**John Lobo** · Answer 1 · 2021-06-01T10:54:52.860000

You can add div tag after body tag like below

<body>
<div  class="pageLoader" id="pageLoader"></div>

In css

.pageLoader{
    background: url(../images/loader.gif) no-repeat center center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
    background-color: #ffffff8c;

}

then in JavaScript

$(window).on('beforeunload', function(){
    
        $('#pageLoader').show();
    
    });
    
    $(function () {
    
        $('#pageLoader').hide();
    })

Updated

 return redirect(route('home'))->with('success', $message)->with('loader',true);

then in JavaScript

$(window).on('beforeunload', function(){
          @if(isset($loader))
            $('#pageLoader').show();
@endif
        
        });
        
        $(function () {
        
            $('#pageLoader').hide();
        })

**Peppermintology** · Answer 2 · 2021-06-01T11:44:32.327000

It feels like you're fudging this a little. Spinners typically work with ajax requests as the spinner provides a visual feedback that an action is ongoing. The action being a request has been sent to the server by the browser and the browser is now waiting on a response. The response is required in order to remove the spinner (response could also be a failure or timeout etc.) and the spinner is removed without a page refresh.

In your use case, the response from the server is in fact redirecting the user to another page, or back to the form page with errors.

So basically what you want to do is have a loading indicator (spinner, words, etc.) which is initially hidden and you display when the form is submitted and it will automatically disappear if the user is redirected back to your form page.

As an example:

<div class="relative grid place-items-center h-screen">
  <form id="some-form">

    <button id="form-submit" class="px-4 py-2 bg-gray-800 rounded text-white">Submit</button>

  </form>
  <div id="loader" class="hidden" style="display: none">
    Loading ...
  </div>
</div>

Then your javascript:

let form = document.querySelector('#some-form');
let loader = document.querySelector('#loader')

form.addEventListener('submit', function (event) {
    event.preventDefault();
  
    // using non css framework method with Style
    loader.style.display = 'block';
  
    // using a css framework such as TailwindCSS
    loader.classList.remove('hidden');

    // pretend the form has been sumitted and returned
    setTimeout(() => loader.style.display = 'none', 1000);
});

You could use jQuery or whatever you want but you get the idea. Example jsFiddle here.

Show Loader when submitting form In laravel collective

There are 2 best solutions below

Related Questions in LARAVEL

Related Questions in LARAVEL-FORM

Trending Questions

Popular # Hahtags

Popular Questions