How to show a page loader in laravel after submitting my form-CodePudding

How to display a loader after form submit in laravel, i am currently using css for this option...but its not working as expected.

 <button type="submit" id="submit" >Request now</button>

CodePudding user response：

Don't know if this is what you need. But I also hope to help you:

<form action="you_action" method="post">
    <button type="submit" id="submit" >Request now</button>
</form>

Method: post or get

Action: Is the link to the page you want to go to when you press submit

CodePudding user response：

document.querySelector(".mybtn").addEventListener('click', myfunction);
var loader = document.querySelector(".myloader");
var contents = document.querySelector(".pageContents");
loader.style.display = "none";

function myfunction() {

  loader.style.display = "block";
  contents.style.display = "none";
}

.myloader {
  position: fixed;
  min-height: 100vh;
  top: 0;
  background-image: url("https://media3.giphy.com/media/KG4PMQ0jyimywxNt8i/giphy.gif?cid=ecf05e47uqzqe9qit5cdf4u7y9fqsw10slzt251h73nx9qri&rid=giphy.gif&ct=g");
  background-repeat: no-repeat;
  background-position: center;
}

.pageContents {
  position: fixed;
  min-height: 100vh;
  top: 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div >
    <button type="submit" id="submit" >Request now</button>
  </div>
  <div >
  </div>


</body>

Run in fullscreen. To make loading gif to stay longer, use Javascript to set a delay before form submission.