I have check box at UI side on which i want to bind data coming from web service in form of jason
Html code:
<label class="checkbox-inline nopaddingleft" for="radio1">
<input name="radio1" type="checkbox" id="radio1"
class="checkbox-inline margin-right-five"
value="name" checked={{insuredProfile.isScrubbed}} />Scrub
</label>
The value i want to bind is:{{insuredProfile.isScrubbed}} it will be true or false
Thanks in advance
In your view use ngChecked.
In your controller you'll need to have something like:
$scope.insuredProfile = { isScrubbed: true };
You have to use ng-model for the checkbox input.
ng-model="insuredProfile.isScrubbed"
Related
I am aiming to create a form to handle disabled JavaScript experience for a small component on my website. Currently I have the following form:
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
...other radio options
<input type="submit" value="Submit" />
</form>
Clicking on either of the radio options and then on the submit button will result in:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie
How can I add another value for each of the radio options? Say I would like to pass someOtherParam which is unique for each option and I would like to get this as output for my options:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper
What I have tried is:
<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />
However, the & symbol is converted to %26 inside the link and feels too hacky. Is there a better way to achieve this? Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
P.S. I am aiming for pure HTML experience with no Javascript involved. Is that possible?
I'm pretty sure this is not posible in modern browsers without the use of JS. Maybe on old browsers you could do some tricks with CSS and display:none because it used to not send fields with display:none, but nowdays that is not an option.
If you can allow Javascript, you can add a data attribute to each radio option and use it to populate an extra hidden input on change.
document.querySelectorAll('input[type=radio][name="someParam"]')
.forEach(radio => radio.addEventListener('change', (event) =>
document.getElementById('someOtherParam').value = event.target.dataset.extraValue
));
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="someOtherParam" name="someOtherParam">
<input type="submit" value="Submit" />
</form>
To add another radio group independent from others, use a distinct name property. For example, to add a second parameter called someOtherParam to the request, create a radio group with name="someOtherParam":
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
And add their correspondent labels.
Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
You can add the required attribute to prevent the browser to send the form before all the inputs have a value.
Without javascript, what you're describing cannot be done.
What you could do, as other posters have suggested is:
Create radio buttons for the list of options that are possible for each category (fruits / vegetables etc)
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
When processing the input on your server side code, check if you have received a value or not. If not, you can choose a default option (apple or whatever). On your page you can mention what the default option would be in case they don't make a selection.
You could make some of the input required as suggested, but you would still have to make check on the server side that the input has been received, since the required attribute is just a suggestion to users browsers - it won't stop a malicious persons from making a request without that parameter by running a script etc.
To submit extra information to the server, you can use a hidden input type and change value as per your needs using javascript.
HTML code
<form method="GET" action="">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="uid3" name="someOtherParam" value="" readonly required />
<input type="submit" value="Submit" onclick="onSubmit()" />
</form>
Javascript code
function onSubmit () {
let fruityRadio = document.getElementById( 'uid1' );
let veggieRadio = document.getElementById( 'uid2' );
if ( fruityRadio.checked ) {
document.getElementById( 'uid3' ).value = 'apple';
} else if ( veggieRadio.checked ) {
document.getElementById( 'uid3' ).value = 'pepper';
}
}
Easy, double up the value with a deliminator between every extra value:
HTML
<div>
<label for="uid1">
<input id="uid1" name="fruit1" type="radio" value="apple:orange" />
Fruit, Apple + Orange
</label>
</div>
<div>
<label for="uid2">
<input id="uid2" name="fruit1" type="radio" value="apple:cherry:lime" />
Fruit, Apple + Cherry + Lime
</label>
</div>
node.js
I'm not sure how node.js handles what PHP refers simply as $_POST['name_attribute_value_here'] though I do know you simply want to use .split(':') to get the two or more values from that single form. If you want more options per radio button just append a deliminator (it doesn't have to be :) between each value.
Both of those radio options have the name "fruit1" so the user can't choose both.
No JavaScript is necessary.
A minor adaptation on the server.
Extra values will obviously not appear to the server if the user doesn't select that radio form field.
Arrays
If you want to set your own key/values then just add a second deliminator:
<input name="fruit1" value="fruit:apple,fruit:lime,color:purple,planet:Earth" />
Then at the server use [whatever].split(',') to get the pairs and iterate in a loop to get each key/value. You could create an entire crazy multi-dimensional array if you really wanted to.
I hope this helps, feel free to comment if you need any further clarification.
Generate form:
const data = [
{ name: 'apple', type:"fruity" },
{ name: 'pepper', type:"veggie"}
]
const form = document.querySelector('form');
const uid = document.querySelector('#uid')
createOptions(data);
function createOptions(data){
data.forEach((e, index) => {
const f = document.createDocumentFragment();
const l = document.createElement('label');
const i = document.createElement('input');
l.setAttribute('for', `uid${index+1}`);
l.textContent=e.name;
i.setAttribute('type', `radio`);
i.setAttribute('for', `uid${index+1}`);
i.setAttribute('name', 'someOtherParam');
i.setAttribute('value', e.name);
i.dataset.otype = e.type;
f.appendChild(l);
f.appendChild(i);
form.insertBefore(f, uid);
i.addEventListener('change', onselectChange, false);
})
}
function onselectChange(event) {
uid.value = event.target.dataset.otype;
}
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="text" id="uid" name="someParam"
style="width:0; visibility: hidden;">
<input type="submit" value="Submit" />
</form>
I can't think another way of doing this using less code, the following achieves your desired result:
<form name="form" method="GET" action="">
<input type="radio" id="uid1" name="someParam" required value="fruity" onchange="document.form.someOtherParam.value = 'apple'" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" required value="veggie" onchange="document.form.someOtherParam.value = 'pepper'" />
<label for="uid2">Vegetable</label>
<input type="hidden" name="someOtherParam" value=""/>
<input type="submit" value="Submit"/>
</form>
There's only 3 changes to your example:
Add a name to the form, then add inline attributes required and onchange to each radio, finally add an input[type=hidden] to include the extra param. The first change is meant so you'll not need document.getElementById later, the second so the form won't be empty submitted and also update the hidden desired value.
My html code,
<div>
<div>
<input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
<label class="label" for="Checkbox0" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
<label class="label" for="Checkbox1" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
<label class="label" for="Checkbox2" >first</label>
</div>
</div>
<div>
<div>
<input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
<label class="label" for="Checkbox3" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
<label class="label" for="Checkbox4" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
<label class="label" for="Checkbox5" >first</label>
</div>
</div>
Likewise I have two more separate divs in the same html file which contains checkboxes. What I need to do is onclick of first checkbox in first div ,I need to disabled every other checkboxes from the first div,second div & third.
As I'm totally new to angular I have no idea how to disable here. I have tried using ng-disabled but it seems not working. Can someone help me with this?
For Angular 2+, you can enable / disable the checkbox by setting the disabled attribute on the input type=checkbox
Use: [attr.disabled]="isDisabled ? true : null"
Note here that [attr.disabled]="isDisabled alone will not work. You will need to explicitly set disabled attribute to null for removing disabled attribute from the disabled checkbox.
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />
ng-disabled is AngularJS syntax. You can use [disabled] input for disable checkboxes.
<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
in .ts isDisabled : boolean;
Optional thing
You can use Angular Material for your developments. because it has many advantages. And also it has well defined API.
<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.
Angular Material
You can use the [disable] attribute your input[type="checkbox"] tag.
For eg: -
<input [disabled]="isDisabled" type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
isDisabled variable will hold the boolean value in your .ts
For larger, more complex forms I highly recommend using a reactive form. With a reactive form, you can use [disabled]="condition" where the condition is something like whateverCheckbox.value.
UPDATE:
I updated my answer to use whateverCheckbox.value as opposed to whateverCheckbox.checked. This approach only works with reactive forms. I highly recommend using reactive forms for larger, more complex forms where you may need more detailed, personalized control over the elements of the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data.
Here is the documentation: https://angular.io/guide/reactive-forms
Once you have the form set up as a reactive form, a form control instantiated and bound to the checkbox input form element, you should be able to access the value of the checkbox as indicated above.
UPDATE 2: You don't necessarily need to use a form either to take advantage of a reactive form control.
In your component.ts file import FormControl from #angular/forms as below:
import { FormControl } from '#angular/forms';
Then declare the form control in the component class, as such:
checkbox1 = new FormControl('');
Then in your template, simply bind that FormControl to the input element as such:
<input type="checkbox" [formControl]="checkbox1">
and then you should be able to access that value anywhere using:
checkbox1.value
If you are using reactive forms you can also disable the checkbox from the component like this
import { FormBuilder, FormGroup } from '#angular/forms';
constructor(private _fb: FormBuilder) { }
myForm: FormGroup;
ngOnInit(): void {
this.myForm = this._fb.group({
myCheckBoxInput: [{value: 1, disabled: true}],
});
}
in reactive form, you can disable the checkbox like so
this.formGroup.get('Checkbox1').disable({ onlySelf: true });
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 got the list of checkboxs form taxlist.
it consist of the two objecs. when i check on the checkbox taxlist.taxprecent,taxlist.taxtype will bind to ng-model cartoder.tax like array
[$promise: Promise, $resolved: false]
0:Resource
__v:0\
_id:"5721d57d5b6691d0107f53c3"
createdAt:"2016-04-28T11:33:02.022Z"
isDeleted:false
modifiedAt:"2016-04-28T11:33:02.023Z"
taxpercent:15
taxtype:"vat"
__proto__:Object
1:Resource
__v:0
_id:"5721ed298ea69da01328cbbc"
createdAt:"2016-04-28T10:59:53.673Z"
isDeleted:false
modifiedAt:"2016-04-28T10:59:53.673Z"
taxpercent:10
taxtype:"service"
__proto__:Object
$promise:Promise
$resolved:true
length:2
__proto__:Array[0]
Html code
<span ng-repeat="item in taxlist">
<label>
<input type="checkbox" ng-model="cartorder.tax" ng-checked="{{item}}">{{item.taxtype}}
</label>
I dont know even how to start this. please help how bind this data
You can add ng-change
<label><input type="checkbox" ng-model="cartorder.tax" ng-checked="{{item}}" ng-change="onChange(cartorder);">{{item.taxtype}}</label>
js
$scope.onChange = function(cartorder){
};
<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)