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
Related
I am trying to load a html form which has submit button after end of a loading screen/animation..
In short,
First loading screen or animation shoul run.. It shoul run for 15 seconds...
Then, form should load.
Here is my code
<div id="load">
<span>Loading...</span>
</div>
<div id="loader">
<form method="POST" action="submit.php">
<button type="button" class="btn btn-primary" id="btnsubmit" name="btnsubmit">Submit </button>
</form>
</div>
Here is my jquery
$(window).load (function (){
$('#loader').fadeOut ('slow', function(){
$('#load').fadeIn ('slow');},15000);});
My codes not work... can anyone help me? Please
The function .fadeOut (https://api.jquery.com/fadeout/) has only the parameters [duration ] [, easing ] [, complete ]. The timeout must therefore be managed with Javascript.
The #load is hidden by default with CSS. The timeout function waits as long as defined in waitTimeUntilFadeOut. Then #loader is faded out and #load is faded in within the complete function.
$(window).on('load', function(){
var waitTimeUntilFadeOut = 2000 ;
setTimeout(function() {
$('#loader').fadeOut ('slow', function() {
$('#load').fadeIn ('slow');
});
}, waitTimeUntilFadeOut);
});
#load {
display:none;
}
<html>
<body>
<div id="loader">loader</div>
<div id="load">load</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I have a task in school and I think Javascript is really hard. Now in the beginning I need to google everything and I only find solutions in different libraries.
In this case I need to use Vanilla JS. When I click on logout button it need to toggle and show the login button.
In the task I cant change the HTML only add JS.
// student
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
You can add click event listeners to both of the buttons to change its own display to none and display the other button.
var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
this.classList.add('is-hidden');//adds is-hidden class
logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
this.classList.add('is-hidden');
login.classList.remove('is-hidden');
});
.is-hidden{
display: none;
}
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>
here's a extremely basic way to do it, I would recommend using more advanced techniques later
function change() {
document.getElementById('but').style.display = "none"
document.getElementById('butother').style.display = "block"
}
function changeother() {
document.getElementById('butother').style.display = "none"
document.getElementById('but').style.display = "block"
}
<html>
<body>
<button id="but" onclick='change()'>log in </button>
<button id="butother" onclick='changeother()'>log out </button>
</body>
</html>
Is submit a reserved word in Javascript?
Take a look at this code:
<html>
<head>
<script>
function sayHello(){
console.log('Hello!');
}
function submit(){
console.log('Submit!')
}
</script>
</head>
<body>
<form>
<button onclick="sayHello()">Say hello</button>
<button onclick="submit()">Submit</button>
</form>
<button onclick="sayHello()">Say hello - outside</button>
<button onclick="submit()">Submit - outside</button>
</body>
</html>
I'm trying to understand why I can't call the submit() function inside the <form> tag but it works outside the tag. I think it is a reserved word even because changing the function name the script works well but I can't find any information about that on mdn
I'm not a JS guru, so can someone help me understand this strange behaviour?
The problem is that submit() is a built-in function that gets called whenever a <form> gets submitted. To have custom functionality kick in which a form is submitted, you'll not only need to use a different function name, but also prevent the default form submission with event.preventDefault(), passing the event into the function.
This can be seen in the following -- note that the sayHello() will clear the screen (with an attempted form submission), whereas customSubmit() will not:
<html>
<head>
<script>
function sayHello(){
console.log('Hello!');
}
function customSubmit(e){
e.preventDefault();
console.log('Submit!')
}
</script>
</head>
<body>
<form>
<button onclick="sayHello()">Say hello</button>
<button onclick="customSubmit(event)">Submit</button>
</form>
<button onclick="sayHello()">Say hello - outside</button>
<button onclick="customSubmit(event)">Submit - outside</button>
</body>
</html>
Buttons inside forms automatically submit the form, as long as the button doesn't have an event handler, or has an event handler that doesn't preventDefault():
<form>
<button>Say hello</button>
<button>Submit</button>
</form>
(see how the form gets submitted - the page in the snippet disappears)
It has nothing to do with the submit function name.
But still, using inline event handlers is bad practice and results in poorly factored, hard-to-manage code. Seriously consider attaching your events with JavaScript, instead, eg: https://developer.mozilla.org/en/DOM/element.addEventListener.
Inline handlers should be avoided just as much as eval should be avoided.
If you want to prevent a button inside a form from submitting the form, call e.preventDefault() like this:
function sayHello(){
console.log('Hello!');
}
function submit(){
console.log('Submit!')
}
const [b1, b2] = Array.from(document.querySelectorAll('button'));
b1.addEventListener('click', (e) => {
e.preventDefault();
sayHello();
});
b2.addEventListener('click', (e) => {
e.preventDefault();
submit();
});
<form>
<button>Say hello</button>
<button>Submit</button>
</form>
Pressing a button in a form reloads the page.
<html>
<head>
</head>
<body>
<!--Any button in the form will submit the form and reload the page-->
<form>
<button id="btn1">Say hello</button>
<button id="btn2">Submit</button>
<button>Anything</button>
</form>
<!--these ones don't-->
<button onclick="sayHello()">Say hello - outside</button>
<button onclick="submit()">Submit - outside</button>
<script>
// notice the page loads when we click the 'anything' button, even without an event handler
//the delay allows you to see it happening
console.log("loading page...");
setTimeout(welcome, 500);
function welcome() {
console.log("page has been loaded");
}
// adding preventDefault to these, stops the form from submitting
function sayHello(e) {
console.log('Hello!');
e.preventDefault();
}
function submit(e) {
console.log('Submit!')
e.preventDefault();
}
//This is how you add event handlers
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.addEventListener('click', sayHello);
btn2.addEventListener('click', submit);
</script>
</body>
</html>
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.
When I fill in my form and send it the fancybox is not coming up.
Here is the code i am using for the fancybox:
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
<style>
.hidden { display: none; }
</style>
This is the confirmtation text i filled in at the plugin Gravity forms
<script type='text/javascript'>
$('#gform_submit_button_2').click(function () {
$#gform_submit_button_2([
{ href : '#fancybox-popup-form' }
]);
});
</script>
And this is the HTML for the button where i need to click on the fire the function
<input type="submit" id="gform_submit_button_2" class="button gform_button" value="Verzenden" tabindex="6" onclick="if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ">
Thanks for your time!
When I fill in my form and send it the fancybox is not coming up.
When you send it the page will be refreshed by the submit so your fancybox will not shown, so try to prevent the default action (submit) using preventDefault() :
$('#gform_submit_button_2').click(function (e) {
e.preventDefault();
//Your code
})
Hope his helps.