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.
Related
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
I have an <input>, showing a number. I used ng-model to bind this number to a variable. My problem is that I don't want the variable to change simply on input, I want it to change on button click, but I also want a default value shown in the input to be the one that's stored in the variable.
To make it slightly clearer:
<input type="number" ng-model="foo">
<button ng-click="updateFoo()">Update foo</button>
{{foo}}
I want foo to reflect changes only when button is pressed, but if I refresh the page, {{foo}} will show some value (logic to retrieve the values exist).
The way I currently did it, in my AngularJS controller:
$scope.foo = 5;
$scope.updateFoo = function(num){
$scope.foo = num;
}
and HTML:
<input type="number" ng-model="not_in_controller">
<button ng-click="updateFoo(not_in_controller)">Update foo</button>
{{foo}}
This works as I want it to, but the input is empty by default.
Another thought was to use two variables, one is for presentation, another one is set after clicking the button
Simply use ng-init directive:
<input type="number" ng-model="not_in_controller" ng-init="not_in_controller=5">
<button ng-click="updateFoo(not_in_controller)">Update foo</button>
{{not_in_controller}}
Just use value="{{ foo }}" in your <input />
Here a jsfiddle: http://jsfiddle.net/5s3cjyuw/
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)
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.
I am using jstl with dropdown lists.
When i click submit button i success the specification but values int dropdownlists are reinitialized.
So I want to submit form without loosing the values already selected in the form because I need to stay always at the same level in the form.To be more clear, user choose a value from ddl and click edit button to show other options and fill them at the same form without loosing what he has selected.
I have tried to deal like that...
<form action="myjsp.jsp" method="post">
<input type="Submit" value="Edit">
...but it doesn't work.
Thank you for your help.
You need to preset the inputs with the request parameter values. You can access parameter values in EL by ${param.name}. Basically:
<input type="text" name="foo" value="${param.foo}">
Note that this is XSS sensitive. You always need to sanitize the user inputs. You can use the JSTL functions taglib for this.
<input type="text" name="foo" value="${fn:escapeXml(param.foo)}">
In case of dropdowns rendered by HTML <select> element, it's a bit trickier. You need to set the selected attribute of the HTML <option> element in question. You can make use of the ternary operator in EL to print the selected attribute whenever the option value matches the request parameter value.
Basic example:
<select name="foo">
<c:forEach items="${options}" var="option">
<option ${param.foo == option ? 'selected' : ''}>${option}</option>
</c:forEach>
</select>