I'm using handlebars in a backbone.js rails app, and I have a Boolean field I'm populating with a checkbox.
When I load the edit page, the form is populated with the contents from the server JSON something like
{id:3,user:'test',checkbox:1}
now in my handlebar form, I want to show that the checkbox is 1.
< input type="checkbox" name="checkbox" value="1" {{#if checkbox}} {{bindAttr checkbox checked="isSelected"}}{{/if}} >
but this isn't returning the checked checkbox. I'd really like to just be able to say if checkbox==1, but I don't see how I can do that with handlebars.
Anysuggestions??
What you would usually do, is using a Boolean in the 'model'.
{
isChecked: true
}
and then
<input type="checkbox" {{bindAttr checked="isChecked"}}>
If the Boolean is true, it will render the checked property, and if the Boolean is false, it would omit the property. So if isChecked is true, then Handlebars would output
<input type="checkbox" checked>
and if isChecked were false, we would get
<input type="checkbox">
Which is what we want!
I also wrote a helper to do this. It doesn't use backbone.js, so may be an alternative for some:
Handlebars.registerHelper('checked', function(currentValue) {
return currentValue == '1' ? ' checked="checked"' : '';
});
Usage example:
<input type="checkbox" name="cbxExample" id="cbxExample" {{checked cbxExample}}/>
Would tick a checkbox if the supplied JSON was:
{"cbxExample" : "1"}
Resulting in:
<input type="checkbox" name="cbxExample" id="cbxExample" checked="checked" />
[my first post - hope that's helpful!]
Related
i have created collection named as "tbl_dynamic" in that a field named "dynamicField" created in that i'm storing data like this
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : {
"text1" : {
"checkedValue" : false
},
"text2" : {
"checkedValue : true
}
}
and in meteor side i have a template like this
<template name="tmpChecked">
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{key}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
</template>
and my helper contains following code to fetch data from collection
//helper to view fields
Template.tmpChecked.helpers({
values: function() {
return tbl_dynamic.find({},{dynamicField:1,text:1});
}
});
now the problem is when i tried to display checkbox value it doesn't show me the checkedValue.
any suggestion ?
Thanks,
I understand that you want to show list of checkboxes and each checkbox followed by input box.
For this, You need to do following 2 things -
Change the data model little bit. Make the dynamicField properties as the array. Each array element containing information about field name and checked property
{
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : [
{
"name": "text1",
"checkedValue" : false
},
{
"name": "text2",
"checkedValue : true
}
]
}
2.In template code, iterate over objects dynamicFields array and display them
<template name="tmpChecked">
{{#with values}}
{{ #each dynamicField}}
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{name}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
{{/each}}
{{/with}}
</template>
You can keep helper function as it is. No need to change.
Hope this helps
i have checkbox on the form
<input class="addToFavorite" type="checkbox" name="addToFavorite"> Add to favorite
now when form posting i check if this checkbox checked with this code. But it return true every time. how i can check if checkbox has been really checked?
boolean wantAddToFavorites = false;
if (isPayAction) {
wantAddToFavorites = request.getParameter("addToFavorite").equals("on");
}
FireBug result
as you see It always send its value
If you want to check on server-side if a checkbox has been checked or not, you should do the following:
1. Add a value to your checkbox
<input class="addToFavorite" type="checkbox" name="addToFavorite" value="addToFavourite"> Add to favorite</input>
2. Check this checkbox value on server-side
if(request.getParameter("addToFavorite") == null){
//checkbox not checked
}else{
//checkbox checked
}
In a checkbox, the value attribute holds the string that will be sent if the box is checked. By default it sends the string "on".
What determines whether it is checked or not is the checked attribute.
Example:
<input type="checkbox" name="check1" checked /> Sends "on"
<input type="checkbox" name="check2" /> Sends null
<input type="checkbox" name="check3" value="hello" checked /> Sends "hello"
<input type="checkbox" name="check3" value="hello" /> Sends null.
I have a checkbox
<input type="checkbox" name="chkNGI" id="prod_ngi_sn" value="1">
When it is checked I pass the value 1, but when it is not checked any value is passed.
I have to pass the value 0.
I've tried
<input type="checkbox" name="chkNGI" id="prod_ngi_sn" <%if prod_ngi_sn.checked then value="1" else value="0" end if%>>
But didn't work.
tks
Checkboxes only pass values when ticked. You need logic on the server side to accommodate that.
Dim chkNGI
chkNGI = Request("chkNGI") & ""
If chkNGI = "" Then
chkNGI = "0"
End If
<script>
function calcParam() {
var checked = document.getElementById("prod_ngi_sn").checked;
if (checked)
document.getElementById("hiddenNGI").value = "1";
else
document.getElementById("hiddenNGI").value = "0"; }
</script>
<input type="hidden" name="chkNGI" id="hiddenNGI">
<input type="checkbox" name="checkNGI" id="prod_ngi_sn" onClick="calcParam()">
You can try this single line solution
Information: RS=Recordset Object
<input type="checkbox" <%If RS("ColumnName")=True Then Response.Write(" checked='checked' ")%> name="tableColumn" value="1" >
I know this question is old, but I recently had to refactor some legacy code for a company in Classic ASP, and ran into this problem. The existing code used a hidden form field with the same name as the checkbox and looked for either "false" or "false, true" in the results. It felt kludgy, but the code also performed actions based on dynamically named checkbox fields with prefixes, so inferring "false" from a missing field would introduce different complications.
If you want a checkbox to return either "0" or "1", this technique should do the trick. It uses an unnamed checkbox to manipulate a named hidden field.
<html>
<body>
<% If isempty(Request("example")) Then %>
<form>
<input type="hidden" name="example" value="0">
<input type="checkbox" onclick="example.value=example.value=='1'?'0':'1'">
<input type="submit" value="Go">
</form>
<% Else %>
<p>example=<%=Request("example")%></p>
<% End If %>
</body>
</html>
Create a hidden input with the name "chkNGI".
Rename your current checkbox to something different.
Add handled for onClick on the checkbox and using a small javascript function, depending on the state of the checkbox, write 0 or 1 in the hidden input.
As an example,
<script>
function calcParam() {
var checked = document.getElementById("prod_ngi_sn").checked;
if (checked)
document.getElementById("hiddenNGI").value = "1";
else
document.getElementById("hiddenNGI").value = "0";
}
</script>
<input type="hidden" name="chkNGI" id="hiddenNGI">
<input type="checkbox" name="checkNGI" id="prod_ngi_sn" onClick="calcParam()">
Your solution in post to saving page;
save.asp
<%
' connection string bla bla
' RS = Recordset Object
If Request.Form("tableColumn")=1 Then
RS("ColumnName") = 1
Else
RS("ColumnName") = 0
End If
' other columns saving process bla bla bla
%>
I have an MVC4 site, with (as part of a hidden form):
<input name="somefield" type="hidden" value="#ViewBag.Test"/>
The value of ViewBag.Test is true. The form field is posting to an input parameter of the form:
public ActionResult SomeAction(bool somefield = false, ...)
but somefield is always false. Upon investigating, I see that the source code has:
<input name="somefield" type="hidden" value="value"/>
However, I know this used to work. What has happened, and what can I do?
This behaviour changed between MVC3 and MVC4. In MVC3, if you have:
<input name="somefield" type="hidden" someprop="#(SomeBooleanExpression)"/>
it would write very literally:
<input name="somefield" type="hidden" someprop="True"/>
However, in MVC4, it follows the "checkbox" etc rules, so if the value is true you get:
<input name="somefield" type="hidden" someprop="someprop"/>
and if it is false it is omitted completely:
<input name="somefield" type="hidden"/>
To get around this, consider .ToString():
<input name="somefield" type="hidden"
someprop="#(SomeBooleanExpression.ToString())"/>
which then follows string rules rather than boolean rules.
initialized Boolean values bool something =false;
then convert this value into string like,
<input name="somefield" type="hidden" value="#something.ToString()>
OR
initialized string something ="false";
< input name="somefield" type="hidden" value="#something" >
then we can read
public ActionResult Somemethod(bool something) => you can get Boolean value here
{
}
I'm currently doing the following to compensate for boolean's not mapping well to radio buttons. I am stuck binding 1 and 0 to the value (instead of true and false) because of how the fields are read out of the observables. The value of Pref1/Pref2 come as true/false boolean values from the server. The key here is I want to not only data-bind the checked value of the radio button to match the true/false in the object, but I also want the boolean value of true/false to be written back into the GraduationClass object. My compensation code is not only ugly, but not scalable.
<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No
Save
function SiteSettingsViewModel() {
var self = this;
this.saveGraduationClass = function(graduationClass) {
// hack until i get a custom radio button binding
if (graduationClass.Pref1() == 1) {
graduationClass.Pref1(true);
} else {
graduationClass.Pref1(false);
}
if (graduationClass.Pref2() == 1) {
graduationClass.Pref2(true);
} else {
graduationClass.Pref2(false);
}
// ...ajax call to save graduationClass to the server
}
function GraduationClass(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
}
Here is example from knockoutJs website, that demonstrate how to use radio buttons with
"checked" attribute:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
};
// ... then later ...
viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>
But I dont understand why you use two objects - "Pref1" and "Pref2" fro one radiobutton group "radioGroup"? In this case you just could use one object as in an example used "spamFlavor".
So, please, describe more ditaily what you want to bind: one radiobuttons group by one selected value, or something else.
Also you could use computed observables to calculate different values, please see example.