I have rails model article receive_letters:boolean. And I have backbone in my application. In backbone view I have smth like it:
<form id="new-article" name="article">
<div class="field">
<label for="receive_letters">Подписаться на новостную рассылку </label>
<input type="text" name="receive_letters" id="receive_letters" value="<%= receive_letters %>">
</div>
It's working fine. But then I change type from "text" to "checkbox", it have value = null.
What am I doing wrong?
For checkbox, you also need to changed from the value attribute to the checked attribute:
<input type="checkbox" name="receive_letters" id="receive_letters" checked="<%= receive_letters %>">
Fixed it.
Template (new.jst.ejs):
<input type="checkbox" name="receive_letters" id="receive_letters">
View (new_view.js.coffee):
events: {
"click input:checkbox": "check"
}
check: (e) ->
if e.currentTarget.checked == true
e.currentTarget.value = "true"
else
e.currentTarget.value = "false"
Related
I'm adding a textbox and a corresponding checkbox to the view on click of a button. These checkbox will determine if the textbox value needs to be shown or hidden.
With the below code I've getting all the textbox fields, but for the checkbox I only get the checked values.
This is the view part
$('#btn-Add-Key-Name').click(function (e) {
i++;
e.preventDefault();
$(`<div class="row" id="rowid`+ i +`">
<div class= "col col-4" >
<section>
<label class="input">
<i class="icon-prepend fa fa-id-badge"></i>
<input type="text" name="KeyName" value="" placeholder="Key Name">
</label>
</section>
</div>
<div class="col col-2">
<label class="checkbox">
<input type="checkbox" name="IsKeyValid" value="true">
<i></i> Key
</label>
</div>
</div >`).appendTo($fields);
});
On the Controller
public JsonResult AddKeyToDB(string[] KeyName, IEnumerable<string> IsKeyValid)
{
}
//Is there a way to get the unchecked values as well for eg:
keyName = ["private", "public"] ,
IsKeyValid = ["false", "true"]
In your html you dont need to hard-code value of checkbox thats why you are only having checked values. So you need to make following change to your code. Just remove value="true" from input type checkbox.
<input type="checkbox" name="IsKeyValid" >
in my form i have one checkbox so when i check the checkbox it should show password entered in password field.i am doing it using angular 7.
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<div>
<input type="password" class="form-control" name="Password" ngModel
#pwd="ngModel" placeholder="Password" required pattern="^(?=.*[a-z])(?
=.*
[A-Z])(?=.*\d)(?=.*[#$!%*?&])[A-Za-z\d#$!%*?&]{8,}$">
<div *ngIf= pwd.invalid>
<small class="form-text text-danger" *ngIf=
pwd.errors.required>Password Required</small>
<small class="form-text text-danger"
*ngIf=pwd.errors.pattern>Minimum eight characters, at least one
uppercase letter, one lowercase letter, one number and one special
character.</small>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input"
[disabled]="pwd.invalid">
<label class="form-check-label" id="show" for="exampleCheck1">Show
Password</label>
</div>
By checking the checkbox it should show password entered in the password field.
Hi and welcome on Stackoverflow!
Try to switch between type="password" and type="text" based on checkbox value.
Add #showPassword to your checkbox input, like that :
<input #showPassword type="checkbox" class="form-check-input" [disabled]="pwd.invalid">
Then on your password field :
<input type="showPassword.checked ? 'text' : 'password'" .... />
EDIT (in case you did not solve it yet, and for others) :
component.ts
// show/hide boolean variable
showPassword: boolean;
constructor() {
// init value in constructor
this.showPassword = false;
}
// click event, show/hide based on checkbox value
showHidePassword(e) {
this.showPassword = e.target.checked;
}
component.html
<input [type]="showPassword ? 'text' : 'password'" />
<input type="checkbox" (change)="showHidePassword($event)" > toggle view
Using Simple Form & Bootstrap, is there a way to add a class on span class="radio" ? (with custom wrapper or wrapper_html ? ). I aim at putting all radio buttons inline (but not the main label 'Vous êtes').
Goal =
Vous êtes :
() Homme () Femme
here is the code (haml) in my view :
= simple_form_for #user do |f|
= f.input :gender, as: :radio_buttons, collection: [["Homme", 0], ["Femme", 1]]
here is the html generated code :
<div class="form-group radio_buttons required user_gender">
<label class="control-label radio_buttons required">
Vous êtes :
</label>
<input type="hidden" name="user[gender]" value="">
<span class="radio">
<label for="user_gender_0">
<input class="radio_buttons required" type="radio" value="0" checked="checked" name="user[gender]" id="user_gender_0">
Homme
</label>
</span>
<span class="radio">
<label for="user_gender_1">
<input class="radio_buttons required" type="radio" value="1" name="user[gender]" id="user_gender_1">
Femme
</label>
</span>
</div>
If I understand what you are looking for correctly, can't you just use 'display block' in your CSS? or simply wrap your main label within it's own containment div.
.control-label {
display: block;
}
Instead of styling the data-valmsg-summary produced by Html.ValidationSummary() in a custom way, I would like to just show the box with the twitter bootstrap style applied to it whenever the field validation fails. How would I go about doing this? Currently my markup looks like this:
..
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div class="container">
<div class="row-fluid">
<br />
<br />
<br />
<br />
</div>
<div class="row-fluid">
<form class="navbar-form pull-right" action="/Login?ReturnUrl=%2F" method="post">
<h3 class="modal-header">Please sign in</h3>
<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" class="input-large" placeholder="Username">
<input data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" class="input-large" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me">
Remember me
</label>
<button type="submit" class="btn btn-danger">Sign in</button>
<br />
<br/>
<div data-valmsg-summary="true" class="alert alert-danger alert-block" id="formval" >
<span class="close pull-right" data-dismiss="alert">×</span>
<strong>Ooops!</strong> You seem to be missing something:
<ul>
<li style="display: none"></li>
</ul>
</div>
</form>
</div>
</div>
I've tried adding the style="display: none" to my div, but that does not seem to do the trick either.
I was looking for something else and stumbled on this. Thought I would post the answer for the next person since I am 5 months late. Add to your document ready.
//I dont want to validate my ajax forms take that if statement out if you want 2.
if ($('form:not([data-ajax="true"])').length != 0) {
var settings = $.data($('form:not([data-ajax="true"])')[0], 'validator').settings;
settings.submitHandler = function (form) {
//success
form.submit();
};
}
$("form").bind("invalid-form.validate", function (form, validator) {
var errors = validator.numberOfInvalids();
var message = "<ul>";
//loop thru the errors
for (var x = 0; x < validator.errorList.length; x++) {
var $group = $(validator.errorList[x].element).parent().parent(); //gets bootstrap class of form-group
var $element = $(validator.errorList[x].element); // gets the element to validate
var elementMessage = validator.errorList[x].message; // gets the message
$group.addClass("has-error"); // adds the bootstrap class has-error to the group
$element.popover({ content: elementMessage, placement: "right" }).popover("show"); // adds a popover
message += "<li>" + elementMessage + "</li>"; //appends message to list
}
message += "</ul>";
// Function I have to add alert to the page, but basically you can do whatever you want with the message now.
RegisterError("There was some errors with your submission!", message, false);
});
Using this code:
- #contacts.each do |contact|
= label_tag "contact[#{contact.id}]", contact.slug
= check_box_tag "contact[#{contact.id}]", contact.id
.clear
Results in:
<label for="contact_1">Avalon3323</label>
<input id="contact_1" name="contact[1]" type="checkbox" value="1" />
<div class='clear'></div>
<label for="contact_2">doutzen</label>
<input id="contact_2" name="contact[2]" type="checkbox" value="2" />
<div class='clear'></div>
<label for="contact_3">jannie6674</label>
Which seems okay according to the documentation.
Still the label is positioned before the checkbox.
Does one have to fix this with CSS? Shouldn't the html order be correctly by itself?
have you tried to swap code?
= check_box_tag "contact[#{contact.id}]", contact.id
= label_tag "contact[#{contact.id}]", contact.slug