Have following data passed from backend:
ALL_CONFIGS: {callDigitalIo=true, controllerId=1, numberPlatesHashSalt=..., numberPlatesShouldBeHashed=false, parkingStatusShouldBeChecked=true}
Where boolean params should be displayed like input element with type=checkbox.
Here is how I handle it on UI page (.ftl):
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked??>checked="checked"</#if>
/>
</label>
</div>
However, checkboxes are all selected:
Number Plates Should be Hashed should not be selected.
How to select only true variables?
After huge research I found solution for this issue:
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked == "true">checked</#if>
/>
</label>
</div>
It works fine.
Assuming that parkingStatusShouldBeChecked is a boolean, this way works too:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
${parkingStatusShouldBeChecked?string('checked','')} />
The first parameter is the "true" expression, so FreeMarker prints checked. Otherwise it prints just an empty string.
See https://freemarker.apache.org/docs/ref_builtins_boolean.html#ref_builtin_string_for_boolean
Related
I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.
these are the checkboxes:
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" v-model="list"
v-on:click='mini=!list'>
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" v-model="mini"
v-on:click='list=!mini'>
<span class="switch">
<p>mini</p>
</span>
</label>
and in data I declare
list: true,
mini: false,
It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false
Thank you for any help!
Due to different browser behavior, you can bind event using $nextTick like this to prevent inconsistency. Seems this is more readable and traceable than using watcher.
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" :value="list" #click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" :value="mini" #click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
<span class="switch">
<p>mini</p>
</span>
</label>
I want to implement a checklist in Angular. Some boxes have to be pre-checked based on an array in the ts file and the array has to be updated when a checkbox is checked. I am doing it like:
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" aria-label="Checkbox 1" [value]="option.text" name="checkBox" [(ngModel)]="optionsSelectedArray"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
optionsSelectedArray contains the option IDs retrieved from server.
But it doesn't work. All the checkboxes come checked when the the division is rendered.
EDIT
I have changed my code as follows :
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" id="{{option.optionId}}" name="checkBox" [(ngModel)]="option.userResponse" (ngModelChange)= "setResponseChanged()">
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
Here option.userResponse in boolean. Now on selecting the checkboxes the currentQuestion object is correctly changing but when the checklist loads for the first time, the checkboxes are not checked correctly.All the checkboxes come checked if the option.userResponse is true for the last item ,none come checked otherwise.
Perhaps this might do what you want
<div class='form-group que-box' *ngFor="let option of currentQuestion.options; let i=index">
<input type="checkbox" aria-label="Checkbox 1" name="checkBox" [(ngModel)]="optionsSelectedArray[i]"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
(I added ; let i=index and [i])
We currently use the following syntax for radio buttons:
<input type="radio" id="opt1" name="option" value="opt1" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="opt2" required/>
<label for="opt2">Description of Option Two</label>
The query-processing script receives the string "opt1", which it then needs to convert to the full-text description of the option. In PHP-speak, I get:
$_POST['option'] => "opt1"
I'd like to save that step and have the full text of the description to be submitted as the value:
$_POST['option'] => "Description of Option One"
Can this be done with HTML alone -- without resorting to JavaScript-rewriting hacks and without duplicating the description text in the HTML? Thanks!
Unfortunately not.
If you have control over the form, the best solution is to use the description for the value:
<input type="radio" id="opt1" name="option" value="Description of Option One" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="Description of Option Two" required/>
<label for="opt2">Description of Option Two</label>
If you don't have control over the form, then javascript is your only solution, you could use a function like the below (either inside an onload event for the page or an onsubmit event on the form:
function radioUpdate() {
document.querySelectorAll('radio').forEach(function(input) {
input.value = document.querySelector('label[for="' + input.id + '"]').text();
});
};
No, it can't.
Consider generating the HTML from your server side code in the first place. You could write a PHP function that takes the label/value as a single argument.
I have a question about type of button. What data-calc-type means in this code?
<label for="x">x: </label><input id="x" type="number" placeholder="0"/>
<label for="y">y: </label><input id="y" type="number" placeholder="0"/>
<label for="z">z: </label><input id="z" type="number" placeholder="0"/>
<div id="calculations">
<button data-calc-type="area">Pole</button>
<button data-calc-type="circuit">Obwód</button>
<button data-calc-type="volume">Objetość</button>
</div>
<p>Wynik: <span id="result"></span></p>
The data-* attribute is very neat. It let you store data in it so you can refer to it with your script.
Exemple: You have many buttons in your page. All buttons do different action. Instead of calling many function you could call one function that deal with data attribue and process data accordingly.
if ($('#button_ID').attr('data-*') == "this attribute"){ //do something}
I want the "EnterTemplate" div to be conditionally available based on the radio buttons. I added the text data-bind at the very bottom for testing purposes, and it returns the "true" or "false" value to me based on the radio button values. I am trying to assign the visible binding this value, but nothing is happening. Any suggestions?
<div><h4>Select Instrument Template:</h4></div>
<div id="ChooseModel">
<strong>Would you like to manually insert number?</strong><br />
<input type="radio" name="ChooseModel" value="True" data-bind="checked: RadioOption"/>#Resx.Yes
<input type="radio" name="ChooseModel" value="False" data-bind="checked: RadioOption"/>#Resx.No
</div>
<div id="EnterTemplate" data-bind="visible: RadioOption">
<div><strong>Model Number: </strong></div>
<div><input data-bind="value: ModelNumberString" /></div>
<div><strong>Manufacturer: </strong></div>
<div><input data-bind="value: ManufacturerString" /></div>
<div>Model Number: <strong data-bind="text: ModelNumberString"></strong></div>
<div>Checked: <strong data-bind="text: RadioOption"></strong></div>
</div>
It will be always visible, because any non empty string is always truthy, you should do this:
data-bind="visible: RadioOption() === 'True'"
Or have other property that is boolean.