I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code:
<p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p>
Is there a way to use Javascript to show this loader bar and hide the submit button when the form is submitted?
If you want to accomplish this using JavaScript library called jQuery, follow these steps:
Start by integrating jQuery into your website:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Next, insert the following code within <script> tags or in an external js file. The selector inside the quotes pertains to your submit button.
$(document).ready(function(){
$('#submit-btn-id').click(function(){
$(this).hide();
$('.loadingImg').show();
});
});
$(function(){
$('input[type="submit"]').click(function(){
$('p.loadingImg').show();
});
});
1- To prevent a second click, consider disabling the submit button using $(this).attr('disabled', 'disabled'); within the click event.
2- If your form is submitted via ajax, it would be wise to handle this in the ajax call itself.
One way to handle form submission is by utilizing the jQuery submit event.
$("#myForm").submit(function()
{
$('#submitButton').hide();
$('.loadingImage').show();
return true;
});
To learn more about this approach, visit the API reference at http://api.jquery.com/submit/
There's a clever approach to accomplish this task without relying on jQuery:
<form id="myForm">
<input />
<p id="message" style="display:none;">Please wait!</p>
<input id="submitButton" type="submit" />
</form>
<script type="text/javascript">
(function (doc) {
doc.getElementById('myForm').onsubmit = function () {
doc.getElementById('submitButton').style.display = 'none';
doc.getElementById('message').style.display = 'block';
};
}(document));
</script>
I am attempting to modify the default categories within a standard WordPress post without creating any custom taxonomies. Issue: When I try to delete a category or tag from the admin panel, an error message pops up stating "An unidentified error has occur ...
Encountered an error in the browser console while running a Vue.js webpack project. https://i.sstatic.net/s2mEp.png The error occurred due to minimized js files within core.min.js. Specifically, the jQuery minimized js is included inside core.min.js. To ...
Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...
I'm looking to invoke a C# server method from JavaScript. Within my gridview, there is a column containing dropdown lists. When the value of the dropdown list changes, I need to use JavaScript to call a server-side method and update the value of anoth ...
I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...
I possess an array: set Array ( [0] => Array ( [name0] => J [name1] => L [name2] => C ) [1] => Array ( [data0] => 3,1,3 [data1] => 5,3 ...
Having an issue with durandal's compose binding as it is looking for views under app/viewmodels instead of app/views The ViewModel code: define(["fields/fieldClosures"], function (fields) { var ctor = function(opt) { this.value = opt.valu ...
const vehicles = [ { 'id': 'truck', 'defaultCategory': 'vehicle' } ] const result = [] Object.keys(vehicles).map((vehicle) => { result.push({ foo: vehicles[vehicle].defaultCategory }) }) c ...
I'm currently learning React.js and working on my very first app. As someone new to frontend development, I am aiming to have a header design similar to that of popular websites like StackOverflow or YouTube, where an image or icon is positioned just ...
I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...
Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...
I recently built a CRUD application using Node.js and MySQL. However, I am facing an issue where I am unable to display the date without the time and in the correct format. { "id": 1, "name": "Rick Sanchez", "dob": & ...
Currently in my angular2 Project, I am utilizing grunt for automating the compilation of my typescript files. Everything seems to be working fine as my files are compiling, but I keep encountering errors: app/webapp/ng2/audit_logs/auditLogs.ts(2,3): erro ...
I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...
Attempting to update an input value using jQuery mouseover. Situation: There are 5 divs with different colors and usernames. When hovering over a div, the input text (and background color for the color input) changes based on database values. Each time a ...
Combining AngularJS, ng-table, and coffeescript has been quite a task for me. I've been trying to create a multiple template filter within coffeescript and pass it into my angularjs template. One of the challenges I'm facing is with a combined & ...
I'm attempting to use Vuetify 2.3.5 to programmatically control the opening and closing of expansion panels. <v-expansion-panels accordion> <v-expansion-panel v-for="(item,i) in faqs" :key="i"> <div class ...
When using my application, users have the option to select and crop images using Ionic Native - Crop. Once they have cropped their image, I will receive the URI of the image, for example: file:///storage/emulated/0/Android/data/com.myApp/cache/15353694789 ...
Here is the code snippet I am working with: var c = function(address, abiJson){ var _ = this; this.data = { wallet: false, account:{ address: false }, contract:{ addre ...
As I attempt to input data into the firebase database, an error arises: 'FireBaseError: Function addDoc() called with invalid data. Unsupported field value: undefined'. The registration form requests 2 inputs - name and email. The function handle ...