I had a tough time wording my question.
Basically when a submit button in a form is clicked I want the button disabled and the button text replaced with a font awesome icon until the POST request goes through. I have the following jquery.
$('div').on('click', '.btn-disabler', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
$(this).css("background-image", "none");
if ($(this).parents('form') && !$(this).hasClass('btn-facebookauth')) {
$(this).parents('form').submit();
}
});
And the button part of my form.
<form>
<button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
<span class="btn-label">Log in</span>
</button>
</form>
My problem is IE 11. In IE with the above code, on click, the button text disappears but the fa icon doesn't show, the button is just blank. The form submits fine.
When I remove the if statement:
$('div').on('click', '.btn-disabler', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
$(this).css("background-image", "none");
});
the button shows the icon correctly and also submits the form? Why is the form submitting when I have removed .submit()? In chrome when I remove the if statement, the icon for the button changes correctly, but the form doesn't submit it just hangs (as expected).
I'm basically trying to troubleshoot the icon not appearing after clicking the submit button in IE while it works fine in chrome.
Javascript
// wait for document ready before trying to attach listener.
$(document).ready(function() {
// Add a submit listener to the form
$('#myform').submit(function(e){
// save this jquery object into a variable as we might access this a few times. In this case it will be the form.
var theform = $(this);
// save the button to a variable.
var thebtn = theform.find(".btn-disabler");
// prevent the form from submitting (could also return false at the end of this function)
e.preventDefault();
thebtn.append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
theform.find('.btn-label').addClass('invisible');
thebtn.css("background-image", "none");
if (!thebtn.hasClass('btn-facebookauth')) {
theform.submit();
}
});
});
html
<form id="myform">
<button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
<span class="btn-label">Log in</span>
</button>
</form>
All the above is untested
The submit button is supposed to submit the form, so it works as expected in IE. If you want to manually submit the form by theform.submit() use a button of type button.
<form>
<button name="button" type="button" class="btn btn-primary submit-button btn-disabler">
<span class="btn-label">Log in</span>
</button>
</form>
Related
I am presenting terms and conditions modal to the user before registration but I am having an issue submitting the form. I think it might be because the submit button is outside of the form?
HTML
<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
...
<button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>
Modal (outside the form above)
....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>
JavaScript
$('#registerButton').click(function() {
$("#legalModal").modal("show");
return false;
});
$(document).ready(function () {
$("#acceptTerms").click(function () {
$("#registerUser").submit();
});
});
What happens when I try to submit the form is refreshing the page and adding a ? to the end of the url: /signup?. If I try submitting it without the modal then it works fine.
Your button is type submit, so it will send data of the form, as the parent form tag tells him, and won't considere your click function since it change the page.
You need to prevent the natural behaviour of a submit button.
The way to do this is preventDefault:
$("#acceptTerms").click(function (event) {
event.preventDefault(); //prevent from natural behaviour
$("#registerUser").submit();
});
I have beginner question about submit behavior. Every time I press submit my loginModal keep coming back up, is this expected behavior? Its like the ready() function is fired again. I would like my initiate App() function to be executed after submit
Here is bits of my code:
//Show loginModal on page ready
$(document).ready(function(){
$('#loginModal').modal('show');
});
//loginModal submit
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>`enter code here`
</div>
//When submit button is clicked
$('#loginModal').submit(function() {}
initiateApp()
});
You need to prevent the default behviour of the submit button i.e. to refresh the page. Use event.preventDefault()
$('#loginModal').submit(function(event) {
event.preventDefault();
initiateApp()
}
);
Since you chose to use an input type of Submit, once you click the button it will trigger an auto post-back to my knowledge and refresh the page. Try using:
<button>
OR
<input type='button'>
This will stop the page from refreshing. Give it a shot!
I am looking for a button that will submit and then close an overlay window.
The code for my button is:
<button class="purchase btn btn-warning">Select</button>
What am I missing to get the button to close after the selection has been made?
Not clear about your question. It's from assumption. Maybe it can help.
function closeSelf(){
// do something
if(condition satisfied){
alert("conditions satisfied, submiting the form.");
document.forms['certform'].submit();
window.close();
}else{
alert("conditions not satisfied, returning to form");
} }
<input type="button" class="purchase btn btn-warning" value="Select" onclick="closeSelf();"/>
I have an web page that has a submit button. My submit button looks like the following:
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
When a user clicks the submit button, I want to disable the button and let the user know that something is happening. To do that, I have the following JavaScript:
$('.wait-on-click').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true);
$('span', this).text('Please wait...');
});
The button disables. The text is updated. However, the submit does not actually get submitted to the server. If I comment out the body of my JavaScript function, it works fine. I do not understand how to fix this.
Thank you!
I believe your problem is with this line
e.preventDefault();
This is preventing the default behavior of the submit button, i.e., submitting! Therefore, remove it.
Update
After testing, I have found the problem.
I believe your problem is with this line
$(this).prop('disabled', true);
For some reason, this is preventing the form from submitting. Therefore, put it in the submit handler.
$('.wait-on-click').click(function(e) {
$('span', this).text('Please wait...');
});
$('form').on('submit', function() {
$('.wait-on-click').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="n" />
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
</form>
I have two buttons (describing the type of delivery). Once selected I have to press another button to proceed . Is there any way how I can proceed automatically after selection?
Here is my code before selection:
<button type="button" class="button btn-delivery-method" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my code after selection:
<button type="button" class="button btn-delivery-method delivery-method__selected" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my third button to proceed:
<button type="button" class="button btn-large--alt" onclick="shippingMethod.save()">
Continue
</button>
Thanks
You can add the onclick event to the first two buttons.
Btw, what does the code do after pressing either of the first two buttons?
Bind a click event to the first button as well:
$(".button.btn-delivery-method").click(function() {
// check if the delivery has been selected
if($(this).hasClass("delivery-method__selected")) {
// either call shippigMethod.save(); here
//trigger the button click
$(".button.btn-large--alt").trigger("click");
}
});
This will trigger the button only when the delivery is selected
if($(this).hasClass("delivery-method__selected")) {
$(".button.btn-large--alt").trigger("click");
}
It would be nice to have the Id from your second button just to avoid any conflicts with other buttons.