i have a form with a submit button:
<button type="submit" class="btn btn-success dis-form-button">
<i class="spinner fa fa-spinner fa-spin"></i>
Sign-in
</button>
the spinner icon is hidden on page load.
when i submit the form i catch the onSubmit event and disable the button & show the spinner icon, but the spinner does not spin when the button is disabled?
any ideas?
Thanks in advance.
I don't think your issue lies with the disabled property on the button. This answer is more of a non-answer, but here's a snippet that shows the functionality you described working just fine.
$('form').on('submit', function(e) {
e.preventDefault();
$('.dis-form-button').prop('disabled', true);
});
.dis-form-button .spinner {
display: none;
}
.dis-form-button:disabled .spinner {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<form>
<button type="submit" class="btn btn-success dis-form-button">
<i class="spinner fa fa-spinner fa-spin"></i>
Sign-in
</button>
</form>
Related
I have the following code for Button
Example 1
<button type='submit' class = 'btn btn-success' name='submit'>Logout<i style='margin-left:10px;' class='fas fa-sign-out-alt' aria-hidden='true'></i></button>
Example 2
<div class='btn-group'>
<button type="submit" name="showNotBillableEntry" class="btn btn-primary" style='border-radius: 8px; '><i class='fa fa-eye' style='margin-right:10px;'></i>Not Billable Entries
</button>
</div>
But when i changes the class btn btn-primary to btn btn-outline-primary, button become grey not outline as in bootstrap reference explained. Earlier they were green in color due to class btn btn-primary.
I want to use this <button type="button" class="btn btn-outline-primary">Primary</button> but it is not working.
Referring bootstrap - https://getbootstrap.com/docs/4.0/components/buttons/
I need help in css becoz the bootstrap link says to use type='button' in place of type='submit' but i can't use that as this button contain some data to be submitted to php server.
I have also included links which are needed for use in bootstrap.
You can do it like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<button type="submit" class="btn btn-outline-primary" style="font-size:30px;">Primary</button>
You can modify this as per your need. This is directly from the bootstrap's stylesheet
.btn-outline-primary{color:#007bff;border-color:#007bff}
.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary.focus,
.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{color:#007bff;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,.show>
.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>
.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}
I want to move the "Delete page" button up next to the "View page" button. Is there an easy way to do this in bootstrap?
I don't want to wrap the h1 and "View page" button in the form, to preserve html readability.
<h1>
Edit page
<a target="_blank" class="btn btn-default" href="/view">View page</a>
<form role="form">
<input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
</form>
</h1>
add display: inline to your form :
form{
display: inline;
}
https://jsfiddle.net/ypkLaexL/
An alternative solution would be to adjust your HTML. Adding a class of pull-right to the form will cause it to align to the right margin of your <h1> tag, and placing the hyperlink inside the <form> will cause the button to align as per your desired results.
Added bonus; you're not creating a class that overrides Bootstraps form framework.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>
Edit page
<form role="form" class="pull-right">
<a target="_blank" class="btn btn-default" href="/view">View page</a>
<input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
</form>
</h1>
I have a Bootstrap modal that shows for filling some data, if the data is incorrect, actually I show an alert and it appears on top.
Now I have a new requirement, create custom alert dialogs. In other parts of the form, there is not a problem, but when I have the Bootstrap modal, if I show the modal in a normal way, it appears in the bottom of the Bootstrap modal (example in this fiddle).
I've looked other questions like this and this and I've tried with z-index (example in this fiddle) and dialog shows in top, but I cannot click anywhere
$(".ui-dialog").css({ 'z-index' : 1000 });
$("#myModal").css({ 'z-index' : 0 });
Also I've tried to disable the modal and enable the dialog without success.
Is this answer correct, and there is no way I can achieve this without more plugins?
The default z-index of the bootstrap modal window as defined in the variables.less file lies at 1050.
#zindex-modal: 1050;
So if you want to place your jquery-ui dialog above that you would at least have to add a z-index value that is greater than the one of the modal window. Or change the modal window z-index to something lower, but i would not do that.
$("#btnalert").click(
function action () {
alert("this is an alert on top");
}
);
$("#btndialog").click(
function action () {
$("#dialog").html("dialog on the back");
$("#dialog").dialog();
$(".ui-dialog").css({
zIndex: '1060',
top: '100px'
});
prepareDialog();
}
);
function prepareDialog() {
$("html, body").animate({ scrollTop: 0 }, "slow");
$(".ui-dialog-titlebar").css({ background: '#F7985D' });
$(".ui-dialog .ui-dialog-content").css({ 'text-align': 'center' });
}
.ui-dialog {
/*z-index: 1060 !important;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" id="btnalert" >ALERT</button>
<button class="btn btn-default" id="btndialog" >DIALOG</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dialog" hidden></div>
As of version 1.10.0+, you can specify in your initialization where to "append" the dialog using the appendTo option and assign it your modal id. No changing of z-indexes anymore.
$("#yourDialogId").dialog({
autoOpen: false,
appendTo: "#yourModalId",
modal: true,
});
try this one on your fiddle:
<button class="btn btn-default" data-dismiss="modal" id="btndialog" >DIALOG</button>
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
My codes are :
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id attribute of html elements.
CSS has many pseudo selector like, :active, :hover, :focus so you can use.
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
JsFiddle
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
view the live demo on jsfiddle
I am using BootStrap Group Button class and found that in my own code, if a button is pressed down, the button will pop up back in a few seconds....
How can I make sure it remain pressed-down status?
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Stage of business:</label>
<br />
<div class="btn-group">
<button class="btn btn-default"><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default"><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default"><span class="glyphicon">Mature Company</span>
</button>
</div>
</div>
</div>
Thank you.
Update
I added the active css and
I found that when I clicked the button the whole page gets refreshed so that's why the button loses active css class.
How to disable the submit action on these 3 button only? Coz I do have a button which is also in this form and it needs to trigger a submit action.
$('.btn-stage').click(function () {
$(this).toggleClass("active"); //addCss("active");
})
Update 3
Also, in this button group, only one button can be selected, if other button is selected, then the rest of buttons should bounce back.
Thank you.
Adding an active class to the button should keep it's 'pressed in' style.
$('.btn').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})
Hope that helps.
Demo
js
$('.Button').click(function() {
$(this).toggleClass("active");
});
css
.Button:active, .active {
background-color:red;
color: white;
}
html
<button class='Button'>Button</button>
Final Demo
js
$('.Button').click(function(e) {
$('.Button').not(this).removeClass('active');
$(this).toggleClass('active');
e.preventDefault();
});
html
<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>
css
.Button:active, .active {
background-color:red;
color: white;
}
add a class to define them lets say "nosubmit" like this :
<button class="btn btn-default nosubmit"><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default nosubmit"><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default nosubmit"><span class="glyphicon">Mature Company</span>
</button>
then do this :
$('.nosubmit').click(function() {
$(this).addClass("active");
$('.nosubmit').unbind( "click" );// this will take off the click handler from all the nosubmit buttons
// if you want it to be to changed back whene you click again use toggleClass instead
return false;
});
Where did you put the buttons? Is it in form? I have no problem add/changing button's class into active if the buttons are not within the form tag. you can use:
$(document).ready(function(){
$('.btn-stage').click(function () {
$('.btn-stage.active').removeClass("active");
$(this).addClass("active");
})
});
but if it is in the form tag, you need to add type='button' to your button elements. so it looks like this
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Stage of business:</label>
<br />
<div class="btn-group">
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Start-up</span>
</button>
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Growth Company</span>
</button>
<button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Mature Company</span>
</button>
</div>
</div>
</div>
</div>
</form>
And the javascript above is still working. When you had a button within a form and you don't specify the type of its button, it will automatically set as type='submit'