I tried to use this form to put checkboxes on a form:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
My problem is that when I try to get the checkboxes checked with my parameters, I always can get only one (the last one checked, example: if I check 1 and 2, I will get 2 only).
How can I do to get them in my controller?
Thanks in advance
Try giving your inputs a name attribute with unique value attributes and unique id attributes.
Example:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" id="first" value="1" name="box-selections[]" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="second" value="2" name="box-selections[]"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="third" value="3" name="box-selections[]"> Checkbox 3
</label>
</div>
Related
I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.
I have form and inside I have radio button option , I have the controller class and the model. I can successfully save the other data but radio buttons options reflects to database as 0 always. I believe there is something wrong with thymeleaf radio button implementation.
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1"
value="true" th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2"
value="false" th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I found it , values should be 0 or 1 instead of true and false
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1" value="1"
th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2" value="0"
th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I want to change the following HTML coding to Ruby on rails
Help me for this
This is my coding
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required auto focus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
<label class="check-box pull-left">
<input type="checkbox" value="rememberme">
Remember me
</label>
Need help? <span class="clearfix"></span>
</form>
There is no think as HTML to ruby.
you can convert it to HAML using enter link description here
I am trying to use the ng-required in a form.
All I did was add ng-required="true" on my input.
In Chrome, when clicking submit it prevents submission and asks the user to fill the field, as expected. On an iPhone, it doesn't show any error and it executes the submit function.
<form name="addGuest" ng-submit="GLCtrl.addGuest()">
<div class="form-group">
<label for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="GLCtrl.newGuest.firstName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" class="form-control" required="true"/>
</div>
<div class="form-group">
<label for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="GLCtrl.newGuest.arrivalDate" is-open="opened" required="true" close-text="Close"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
<button type="button" class="btn btn-default" ng-click="GLCtrl.cancelAdd()"><i class="glyphicon glyphicon-remove"></i></button>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-ok"></i></button>
</form>
You need to check if the form is valid before proceeding to your form submission process. In regards to your problem, you are probably relying on HTML5's required attribute which is added when ng-required is true. This might work on chrome but it partially works in IOS.
See the note on this link
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Solution:
Add novalidate in your form, don't use the HTML5 required attribute messaging which is only useful for some browsers. Show required error message explicitly.
Sample HTML implementation:
<form name="form" ng-submit="submit(form, user)">
<input type="email" required name="email" ng-model="user.email">
<div ng-show="form.email.$error.required>This field is required</div>
<input type="password" required name="password" ng-model="user.password">
<div ng-show="form.password.$error.required>This field is required</div>
<button type="submit">Login</button>
</form>
Sample Controller implementation:
$scope.submit = function(form, user) {
if(form.$valid) { // guard against any errors
// do you login process here..
}
};
Additionally, you can also use the ng-disabled approach to disable the submit button when when form is invalid.
<button type="submit" ng-disabled="form.$invalid">Login</button>
UPDATE:
This update takes into consideration that you are using twitter bootstrap3. By using the following classes: 'has-error' for form-groups and 'help-block' for showing the error messages. By using the ng-class and ng-show directives in showing the errors with angular form validation indicators mentioned in each angular input directives and the FormController and NgModelController documentation and also the guides shown in the developer's guide.
DEMO
HTML
<form name="form" ng-submit="submit(form, guest)" novalidate>
<div class="form-group" ng-class="{'has-error': form.firstName.$invalid && form.firstName.$dirty}">
<label class="control-label" for="newGuestFirstName">First Name</label>
<input type="text" id="newGuestFirstName" ng-model="guest.firstName" name="firstName" class="form-control" required="" />
<div ng-if="form.firstName.$invalid && form.firstName.$dirty">
<span class="help-block" ng-show="form.firstName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.lastName.$invalid && form.lastName.$dirty}">
<label class="control-label" for="newGuestLastName">Last Name</label>
<input type="text" id="newGuestLastName" ng-model="GLCtrl.newGuest.lastName" name="lastName" class="form-control" required="" />
<div ng-if="form.lastName.$invalid && form.lastName.$dirty">
<span class="help-block" ng-show="form.lastName.$error.required">This field is required</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error': form.arrivalDate.$invalid && form.arrivalDate.$dirty}">
<label class="control-label" for="arrivalDate">Arrival Date</label>
<div class="input-group">
<input type="text" id="arrivalDate" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="arrivalDate" is-open="opened" name="arrivalDate" required close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div ng-if="form.arrivalDate.$invalid && form.arrivalDate.$dirty">
<span class="help-block" ng-show="form.arrivalDate.$error.required">This field is required</span>
</div>
</div>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-remove"></i>
</button>
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-ok"></i>
</button>
</form>
JAVSCRIPT
Controller Logic submit()
var fields = ['firstName', 'lastName', 'arrivalDate'];
$scope.submit = function(form, guest) {
if(form.$valid) {
// form is valid, do you form submission processhere..
} else {
angular.forEach(fields, function(field) {
form[field].$dirty = true;
});
}
};
I am using Twitter's Bootstrap 3, the one that produces the pretty blue buttons. I would like to, using either rails form_for or simple_form, produce a radio_button group that looks the same as the following html one does:
<div class= "form-group">
<div class= "btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="ptype", id="freelancer">
Freelancer
</label>
<label class="btn btn-primary">
<input type="radio" name= "ptype" id="agency">
Agency
</label>
</div>
</div>
That is, I would like the radio button group to look like the bottom option in the image below, rather than the top.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Freelancer
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Agency
</label>
</div>
You will need the specific javascript for this to work.
http://getbootstrap.com/javascript/#buttons
that's how I fixed it, the rails way:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<%= radio_button_tag :flight_id, flight.id %>select
</label>
</div>