We Keep Coding

Stop CSS loader spinning if form validation error, django, javascript

How do I stop the loader spinner showing if the form submit fails and the user has to complete a missing form field. The spinner keeps spinning forever while the user enters the missing information.
My submit button in the form:
...
<div class="control">
<button type="submit" class="button" onclick="showDiv()">Submit
</button>
</div>
</form>
My spinning loader below the form:
<span class="loader" id="loadingdisplay" style="display:none;"></span>
My javascript on click event to display spinning loader:
<script type="text/javascript">
function showDiv() {
document.getElementById('loadingdisplay').style.display = "block";
}
</script>

You can add a listener on your form or your field that will hide your loader.
<script>
var x = document.getElementById("myInputField");
x.addEventListener("focus", myFunctionHideDiv);
function myFunctionHideDiv() {
document.getElementById('loadingdisplay').style.display = "None";
}
</script>
Ressources :
EventListener documentation
Event documentation

show loading before load page on click

$("#button").click(function(){
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<div id="wrapper"></div>
<div id="button">click me</div>
I want show loading before send (load) page.php after click #button

Here is the jsfiddle script https://jsfiddle.net/1uwopptv/ or inline script assuming this is what you want. You can again hide the loading gif, after request is completed.
$("#button").click(function(){
$('#img').show();
$('#button').hide();
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>
<div id="button">click me</div>
<img src="https://loading.io/assets/img/landing/curved-bars.svg" id="img" style="display:none"/ >
Disclaimer : Image used belongs to site loading.io, as came up in first google search.

Show div element when button is clicked before the form is submitted

I want to show a spinner div element on my page when user clicks submit button. There seems to be a bug in my code as I checked multiple answers and suggestions here for similar problems and nothing seems to work - on click console message is shown and the page starts reloading without showing the div element.
HTML:
<form action="/uploader" id="upload_form" method="POST" enctype="multipart/form-data" runat="server">
...
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
Jquery:
$(document).ready(function(){
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
this.submit();
});
});
I also tried without success :
$('#upload_button').on('click', function(e) {
console.log('Clicked on upload form');
$('.sk-cube-grid').show();
});
EDIT: when I remove this.submit(); the spinner is shown after click but the form is not submitted - so CSS seems to be fine. Also, upload takes several seconds before page is reloaded so I have time to see the messages on console and verify that no spinner is shown...

The code works. But the message quickly disappear becouse a new page is rendered.
$('.sk-cube-grid').hide();
$('#upload_form').on('submit', function(e) {
e.preventDefault();
$('.sk-cube-grid').show();
console.log('Upload button was clicked');
var form = this;
setTimeout( function () {
form.submit();
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/7914637" id="upload_form" method="GET">
<p>...</p>
<div class="form-group">
<input type = "submit" id="upload_button" class="btn btn-primary btn-lg" />
</div>
</form>
<div class="sk-cube-grid">My hide message</div>

I think that you should make an additional submit button that is hidden and is being pressed automatically by JavaScript after an interval that the spinner should have been shown.
Code:
<form action="/uploader" method="POST">
<input type="button" value="Submit" onclick="showSpinner()">
<div id="loading"></div>
<input type="submit" style="visibility: hidden" id="submit">
<script>
function showSpinner() {
document.getElementById("loading").style = "background: blue";
document.getElementById("animation").innerHTML =
'#keyframes loading {
100% { background: red; }
}';
setTimeout(redirect, 2000)
}
function redirect() {
document.getElementById("submit").click();
}
</script>
<style>
#loading {
height: 50px;
width: 50px;
animation: loading 2s linear infinite;
</style>
<style id="animation"></style>
You can increase the setTimeout to fit your spinner, or if you use percentage, make it redirect when it's 100%.

You need to make a check before confirmation like:
$(function() {
$('#upload_button').on('click', function(e) {
if (confirm("Click OK to continue?")){
$('form').submit();
}
else
{
e.preventDefault();
}});
});
Hope it will help you.

Javascript loading / spinning image/icon while loading the search results

I just want to understand more of the previous post from this site and w3school, where the loading image/icon is displayed while loading the page content.
Here's the script I've re-used -
<script type="text/javascript">
$(document).ready(function(){
$('#Btn_5').click(function() {
$('#spinner').show();
});
});
</script>
Here's the form section and script -
<form id="iform" method="get" action="">
Search: <input type="text" id="search_box"><br>
<div id="Btn_5" class="btn">Search</div>
</form>
<br>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://www.w3schools.com/jquery/demo_wait.gif" alt="Loading"/>
</div>
<br>
<body>
<script type="text/javascript">
...
$( "div.content:contains('"+ filterarray[i] +"')").css( "display", "block" );
$("#results").append(results);
...
</script>
<div id="results"></div>
</body>
I have this loading icon spinner, but it doesn't work after the results are displayed. It only spins when button (Btn_5) is clicked and loading icon disappears when the page reloads.
QUESTION: I want to run the loading/spinning icon from the start of the button click until all content under the are displayed. Is there a way to do this?

I hope I am understanding correctly.
But, you want to show the spinner before:
$("#results").append(results);
and hide it after the results are appended?
If that is the case, then you should just be able to do;
$('#spinner').show(); //show spinner
$( "div.content:contains('"+ filterarray[i] +"')")
.css( "display", "block" ); //not sure what you are doing here
$('#results').append(results); //append results, which you have not defined in example
$('#spinner').hide(); //hide spinner

Use that as
//before load
window.onbeforeunload = function () { $('#spinner').show(); }
//after loaded
$(window).load(function() {
$('#spinner').hide();
});

How to delay Hide/Show events until Iframe loads after a submit

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page. The Iframe takes a while to load.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
This is the Hide/Show script
$(function () {
$('#form_710370').submit(function (e) {
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
This is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
This is the relevant CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}

Detect your iFrame has loaded :
$('#YourIframe').load(function(){
});
On your form submitted :
$("#form_710370").on('ajax:complete',function(){
});

Put your hide and show code inside iframe load() function.
$('#frame').load(function(){
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
});

Try this
timeout = setTimeout(function () {
$('#form_container').hide();
}, 6000);

// delay
setTimeout(function () {
// after delay
$('#form_container').animate({
'height': '0px'
}, '400', 'swing', function () {
// finish animate fadeIn
$('#mydivhide1, #mydivhide2').fadeIn('400');
});
}, '700');
Hope is help