How can I apply the stored true or false value to the checked attribute?
I have a series of question where a user can toggle on/off (true/false) as an answer. I have created an object called questions in Meteor.user().profile. The field names are the questions, and the values stored are either true or false.
Now I would like the attribute for each field to display the value stored instead of resetting to its default value.
<template name="template">
{{#with currentUser.profile.questions}}
<div class="row">
<input data-name="profile.questions.school" type="checkbox" name="questions" checked="{{school}}"> Go to School?
</div>
<div class="row">
<input data-name="profile.questions.contributor" type="checkbox" name="questions" checked={{contributor}}"> contributor?
</div>
{{/with}}
</template>
Am I doing this the long winded way? Would using the spacebars {{isChecked}} method aid in anyway? https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/
It seems as it is simply for displaying the check box.
The way I handle checkboxes/radios is like this:
Template.myTemplate.helpers({
isMyCheckboxChecked: function(value) {
return (value == true ? 'checked' : '');
}
});
Then in my template I can do:
<input name="myCheckbox" type="checkbox" value="true" {{isMyCheckboxChecked myCheckboxValue}} />
This assumes you are passing in a value to determine if the checkbox needs to be checked. If your values are pretty much true/false across the board, I would even consider making the helper "global" using Template.registerHelper. The code would pretty much be the same, you would just define the helper slightly different. This would make it available in all templates.
Related
I am new at angular currently started a project with angular 9 to build survey application where I have
dynamic questions with
different question type (radio,checkbox, textbox, textarea, dropdown,etc)
question options (dynamic for each question)
dynamic attributes like (required, minlength, maxlength, pattern, data-attributes)
I started with template driven form, but having issues with attribute, multiple checkboxes and may face more issue in future
while reactive Forms looks too much complex
Looking for expert suggesion which method should I follow
currently at teplate driven forms to render checkboxes I wrote this code
<!--checkbox type=2 -->
<div class="optgroup" *ngSwitchCase="2">
<div *ngFor="let opt of question.QuestionOption; let io = index" class="form-check form-check-inline mx-3" >
<input type="checkbox"
name="data[{{survey.Survey.id}}][{{section.id}}][{{question.id}}][]"
[id]="'rdo'+is+iq+io"
value="{{opt.title}}"
class="form-check-input"
ngModel />
<label [for]="'rdo'+is+iq+io" class="form-check-label">{{opt.title}}</label>
</div>
</div>
I am able to select multiple checkboxes but at {{f.value | json}} only last changed value is coming as boolean but not array of select values.
and secondly how can add attribute dynamically
if(webservice.currentQuestion.attrubutes != null){
loop over attributes and
add each attribute to let's say above checkbox or <input type="text"> or <select>
}
have no idea how can add these dynamic attributes
So I have a table that is suppose to reflect data that is passed in from sql and one of these data fields is a boolean that is supposed to be shown by a checkbox
From what I can tell I have set up the checkbox correctly but it still will not show as true. I also had it print out the value next to the check box to make sure the correct value was being passed.
<input name="DidPass" type="checkbox" ng-model="task.DidPass" ng-true-value="1" ng-false-value="0">{{task.DidPass}}
Here is a picture of the result:
Use ng-checked directive of angular like following:
<input name="DidPass" type="checkbox" ng-checked="task.DidPass == 1" ng-model="task.DidPass" ng-true-value="1" ng-false-value="0">{{task.DidPass}}
Maybe you could use the ng-checked directive ?
See docs
Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)
I am using jsp/jstl to render a ui. Now I want to populate a "ui toggle checkbox" checked/unchecked based on a boolean value that I am passing from a controller. How do I do that?
Here is what I have now:
<div class="ui toggle checkbox">
<input type="checkbox" name="enabled" value="${enabled}">
<label>Is Enabled?</label>
</div>
The value of the "${enabled}" is being passed correctly but how to check the box if it is true? Is JQuery/javascript the only option?
Use this: ${enabled?'checked="checked"':''}. And put it outside the value property.
It uses a ternary operator to check the value of enabled and return the corresponding string.
Hi I have some code like:
foreach (var item in Model) {
<div>
#Html.DisplayFor(modelItem => item.UserRole.Role.Name)
</div>
<div>
<input type="checkbox" name="ids" checked="#item.Active" />
</div>
}
What I was trying to achieve was set the checkbox check if item is Active else not checked.
I understand the syntax should be checked="checked" and I've set it up as checked="true"
I don't understand how to convert the true to checked and what to do for false.
I was trying to use a ternary but it wouldn't play nice. Can anybody help?
The presence of the checked attribute will cause it to be checked, i.e It doesn't matter (AFAIK) what the value of the attribute is. So you need to detect whether or not to add the checked attribute at all:
foreach (var item in Model)
{
<div>
#Html.DisplayFor(modelItem => item.UserRole.Role.Name)
</div>
<div>
<input type="checkbox" name="ids" #if (item.Active) { Write("checked"); }/>
</div>
}
Edited: changed to MДΓΓ БДLL version, much cleaner.
One brute force approach =P
I understand the syntax should be checked="checked"
If you are using XHTML, that is true. In HTML the shorthand syntax is recommended where you specify only the value of that attribute (although user agents don't have a problem with the long for these days, it is quicker to type).
<input type="checkbox" name="foo" value="bar" checked>
I don't understand how to convert the true to checked
That depends on the (unspecified) template language you are using.
and what to do for false.
Don't include the checked attribute at all.
<input type="checkbox" name="foo" value="bar">
In HTML, to uncheck it, just remove the checked="whatever" attribute. Technically, HTML doesn't care what the value of checked="" is, just that it exists and that it's valid markup.