i have this btn-group:
<div class="control-group">
<label class="control-label">Sex</label>
<div class="controls">
<input id="filtro_sexo" type="hidden" />
<div class="btn-group" data-toggle-name="filter_sex" data-toggle="buttons-radio">
<button value="Male" type="button" class="btn">Male</button>
<button value="Female" type="button" class="btn">Female</button>
</div>
</div>
</div>
the problem is that I need the user to be able to select or deselect the option. the user should be able to select one option, or none.
but data-toggle = "buttons-radio" will not let me deselect the option selected.
I achieve this by using [data-toggle=buttons-checkbox], add a custom attribute [data-single-select], and write few lines of jQuery:
HTML:
<div class="btn-group" data-toggle="buttons-checkbox" data-single-select>
<button class="btn">...</button>
<button class="btn">...</button>
<button class="btn">...</button>
</div>
jQuery:
$("[data-toggle='buttons-checkbox'][data-single-select] .btn").live('click', function(evt){
$(this).siblings().removeClass('active');
});
#Rafael
using [input type="radio"] looks way too ugly. That's why we use Bootstrap.
Related
I have HTML form with submit button inside. Inside the form there are piece of HTML code which popups in modal window when filling up the form. Inside this modal are one more input and submit button. And it does not work, the form doesn't send to email. But when I move entire button HTML code right before </form> then submit button works. Here is a code:
<form name="autoForm" id="contact-form" class="row" method="post" action="php/send.php">
<div class="form-group col-md-6">
<label id="address-label" for="place">* Markė | modelis | metai | TA | miestas</label>
<input id="form_place" type="text" name="place" class="form-control" data-error="Laukas privalomas" >
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-md-12">
<label for="message">Automobilio būklė</label>
<textarea id="form_message" name="message" class="form-control h-auto" rows="4" data-error="Prašau, parašykite daugiau apie NT"
placeholder="Čia galite parašyti daugiau informacijos apie automobilio būklę"></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-container col mt-5">
<a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a>
</div>
<div id="modal-background" class="modal-background container-hidden">
<div id="modal-form" class="modal-form">
<a id="modal-close"><i class="icon-close" data-v-27b8b94e=""></i></a>
<div class="form-header">
<h2>Gaukite kainos pasiūlymus tiesiai į savo telefoną.</h2>
<p>Įveskite telefono numerį ir gaukite pasiūlymo nuorodą <b>SMS</b></p>
</div>
<div class="form-body">
<div class="form-group col-md-6">
<label class="phone" for="phone">* Jūsų telefono numeris</label>
<input id="form_phone" type="phone" name="phone" class="form-control" required="required" data-error="Laukas privalomas">
<div class="help-block with-errors"></div>
</div>
<input type="hidden" name="code" value="" id="code" />
<button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
<span class="privacy">Sutinku su privatumo politika</span>
</div>
</div>
</form>
Filling up first inputs there are first button <a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a> which is opening the modal windows. Inside after filling up additional input I press <button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button> which doesn't work.
But form work when button is moved before </form>. Form sends all values - inside and out of modal window.
Can't get what is wrong.
If you have button outside </form> it would not work the solution is using form="" parameter to the button it basically tell this button belong to this specific form element
<button class="btn btn-primary" form="contact-form" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
Your submit button will confused which form that it should submitted if you place it outside the form tag.
You could use javascript to submit the form.
https://www.javascript-coder.com/javascript-form/javascript-form-submit/
Put a button inside your modal with onclick="submitForm('contact-form');", then add below js code
function submitForm(id) {
document.getElementById(id).submit();
}
Solved this by adding submit button before with attribute hidden:
<form>
<!-- the form content -->
<button class="btn btn-primary" type="submit" id="form_submit" hidden></button>
</form>
And that button inside of modal window made as trigger with attribute onclick="submitForm();" like this:
<button class="btn btn-primary" onclick="submitForm();"><font size="4">Tęsti</font></button>
In JS it triggers submit button using .click() method:
const submitBtn = document.getElementById('form_submit');
function submitForm() {
submitBtn.click();
}
This is my html code:
<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>
You see my input tag has 8 columns and my button has 2.
Then I don't get why I'm getting this:
Isn't supposed they should be X-aligned?
What I expect is:
But I had to use <div class="row"> there, which is modifying margins (look at the label).
You need form inline
and don't forget to set for inside label
<form class="form-inline">
<label for="list_search">Search:</label>
<input type="text" id="list_search" class="form-control">
<button class="btn btn-info">Search</button>
</form>
GL
I have some fields inside a form tag and submit button outside a form tag. If any of the fields inside a form is empty my form should not be submitted. For this I used the required attribute but it was not working since submit button was outside of the <form> and also used novalidate attribute. Nothing seems to work.
Below is my code:
<section id="profile" class="content-header">
<div class="thumbnail">
<button type="submit" class="btn btn-block btn-success" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
</div>
<div class="row">
<form name="profileForm" role="form">
<div class="form-group col-md-6">
<label for="firstName"> First Name </label>
<input type="text" class="form-control" id="firstName" ng- model="profileDetails.firstName" ng-disabled="viewProfile" required/>
</div>
<div class="form-group col-md-6" ng-if="userDetails.role==0">
<label for="firstName"> Middle Name </label>
<input type="text" class="form-control" id="middleName" ng- model="profileDetails.middleName" ng-disabled="viewProfile" />
</div>
</form>
</div>
</section>
like FirstName and MiddleName there are many other fields without filling any of those fields my form should not be submitted, can anyone suggest me the best approach for this. My angularController is:
(function() {
function profileController($scope, profileFactory, $loading) {
$scope.updateProfile = function() {
$loading.start("main");
profileFactory
.updateProfile($scope.profileDetails)
.then(function(response) {
var updatedUserDetails = response.user;
if (updatedUserDetails.imagePath !== null) {
$scope.profileDetails.imagePath = updatedUserDetails.imagePath;
$scope.profileDetails.profieImageBytes = updatedUserDetails.profieImageBytes;
}
angular.extend($scope.userDetails, $scope.profileDetails);
$scope.editProfile();
})
.catch(function() {
$loading.finish("main");
});
};
$loading.finish("main");
}
profileController.$inject = ["$scope", "profileFactory", "$loading"];
angular
.module("vResume.profile")
.controller("profileController", profileController);
})();
You typically use the .$invalid field on the form with ng-disabled for this.
<button type="submit" class="btn btn-block btn-success" ng-disabled="profileForm.$invalid" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
See the angularjs docs.
Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.
Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.
<div class="btn-group">
<button type="button" class="btn btn-default active">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
It's not completely possible to do this with HTML only - (as your title implies).
Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:
<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>
As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.
EXAMPLE HERE
It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:
.btn-default:focus, .btn-default.active {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.
Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.
EXAMPLE HERE
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
I want to have the view like above.
But i am getting something like below.
I was wondering how i can achieve it using bootstrap.
My html code.
<div class="controle-group">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<input id="_spring_security_remember_me"
name="_spring_security_remember_me" type="checkbox" />
<fmt:message key="remember.password.time" />
</div>
I think you want to do something more like..
<form class="form-inline">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<label class="checkbox">
<input id="_spring_security_remember_me" name="_spring_security_remember_me" type="checkbox" class="form-control">
<fmt:message key="remember.password.time" />
</label>
</form>
This assumes you're using Bootstrap 2.x
Demo: http://www.bootply.com/73070
Apart the fact you mispelled control in your class, it seems you inserted a screenshot from bootstrap3 but you're using bootstrap2.