Mixing
Adding a loader after clicking submit button on a form (loader keeps repeating)
My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved this, however it is not ideal.
I feel as though I'm doing something poorly because the loader is acting strange, sometimes it will show only once but others it gets repeated, and background-repeat: no-repeat has no effect.
Here is my jQuery:
$(document).ready(function() {
$("input[name='application-submit']").hover(function() {
$(this).toggleClass("btn-hover");
$("form").submit(function() {
$("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
$("input[name='application-submit']").hide();
$("img.loader").css("position", "relative", "top", "0", "left", "0");
});
});
});
Am I doing something wrong here that is making it so that the CSS I'm using is ineffective? Is my method archaic? What is a more efficient way to go about this? (I don't want the full code, I just need to be steered in the right direction as to what I'm doing wrong).
You can see a live example here. If you upload an image and then click submit (ignore the other fields), you'll see the image loader in question.
javascript jquery
edited Jan 1 at 21:08
Flimzy
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
add a comment |
My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved this, however it is not ideal.
I feel as though I'm doing something poorly because the loader is acting strange, sometimes it will show only once but others it gets repeated, and background-repeat: no-repeat has no effect.
Here is my jQuery:
$(document).ready(function() {
$("input[name='application-submit']").hover(function() {
$(this).toggleClass("btn-hover");
$("form").submit(function() {
$("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
$("input[name='application-submit']").hide();
$("img.loader").css("position", "relative", "top", "0", "left", "0");
});
});
});
Am I doing something wrong here that is making it so that the CSS I'm using is ineffective? Is my method archaic? What is a more efficient way to go about this? (I don't want the full code, I just need to be steered in the right direction as to what I'm doing wrong).
You can see a live example here. If you upload an image and then click submit (ignore the other fields), you'll see the image loader in question.
javascript jquery
edited Jan 1 at 21:08
Flimzy
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14
add a comment |
My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved this, however it is not ideal.
I feel as though I'm doing something poorly because the loader is acting strange, sometimes it will show only once but others it gets repeated, and background-repeat: no-repeat has no effect.
Here is my jQuery:
$(document).ready(function() {
$("input[name='application-submit']").hover(function() {
$(this).toggleClass("btn-hover");
$("form").submit(function() {
$("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
$("input[name='application-submit']").hide();
$("img.loader").css("position", "relative", "top", "0", "left", "0");
});
});
});
Am I doing something wrong here that is making it so that the CSS I'm using is ineffective? Is my method archaic? What is a more efficient way to go about this? (I don't want the full code, I just need to be steered in the right direction as to what I'm doing wrong).
You can see a live example here. If you upload an image and then click submit (ignore the other fields), you'll see the image loader in question.
javascript jquery
edited Jan 1 at 21:08
Flimzy
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved this, however it is not ideal.
I feel as though I'm doing something poorly because the loader is acting strange, sometimes it will show only once but others it gets repeated, and background-repeat: no-repeat has no effect.
Here is my jQuery:
$(document).ready(function() {
$("input[name='application-submit']").hover(function() {
$(this).toggleClass("btn-hover");
$("form").submit(function() {
$("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
$("input[name='application-submit']").hide();
$("img.loader").css("position", "relative", "top", "0", "left", "0");
});
});
});
Am I doing something wrong here that is making it so that the CSS I'm using is ineffective? Is my method archaic? What is a more efficient way to go about this? (I don't want the full code, I just need to be steered in the right direction as to what I'm doing wrong).
You can see a live example here. If you upload an image and then click submit (ignore the other fields), you'll see the image loader in question.
javascript jquery
javascript jquery
edited Jan 1 at 21:08
Flimzy
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
edited Jan 1 at 21:08
Flimzy
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
edited Jan 1 at 21:08
Flimzy
39.3k106698
edited Jan 1 at 21:08
Flimzy
39.3k106698
edited Jan 1 at 21:08
Flimzy
39.3k106698
39.3k106698
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
asked Jul 17 '15 at 8:02
LansanaLansana
4,97222553
4,97222553
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14
add a comment |
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14
add a comment |
1 Answer
1
active
oldest
votes
The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31471044%2fadding-a-loader-after-clicking-submit-button-on-a-form-loader-keeps-repeating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
add a comment |
The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
add a comment |
The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
The problem is on every click you are adding a new image, also you are adding multiple submit handlers
$(document).ready(function () {
var $btn = $("input[name='application-submit']").hover(function () {
$(this).toggleClass("btn-hover");
});
$("form").submit(function () {
var $img = $btn.next('.loader').show();
if (!$img.length) {
$img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
position: 'relative',
top: 0,
left: 0
}).insertAfter($btn);
}
$btn.hide();
});
});
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
answered Jul 17 '15 at 8:12
Arun P JohnyArun P Johny
325k51431449
325k51431449
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
add a comment |
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
Ah, I see what I was doing now. Thank you! Can you explain the !$img.length part? Is that saying if the image does not exceed the width of the image then add it, meaning there is nothing there yet, and if so, add nothing?
– Lansana
Jul 17 '15 at 8:16
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
@LansanaCamara yes... if the image does not exists then add it else just show the existing one
– Arun P Johny
Jul 17 '15 at 8:23
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
Gotcha, thanks again!
– Lansana
Jul 17 '15 at 8:25
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f31471044%2fadding-a-loader-after-clicking-submit-button-on-a-form-loader-keeps-repeating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
is there a functional issue here... or you are just asking is there a better way to do it
– Arun P Johny
Jul 17 '15 at 8:11
The question states that there is a functional issue (the repeat of the loader) as well as asks for a more efficient way of implementation.
– Lansana
Jul 17 '15 at 8:14