I have the following code:
<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]=
{standalone:true} (change)="recovery(i.checkt,i.TherapeuticArea)">
{{i.TherapeuticArea}}
The problem I am facing is that with standalone:true every checkbox is checked by default and when standalone is false, the checkbox isn't working. Is there any way of setting the checkbox value to unchecked while having full functionality for the user?
You need to set the checked attribute on the input like the following:
<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]={standalone:true}
(change)="recovery(i.checkt,i.TherapeuticArea)" [checked]="i.checkt">
But I would recommend #Florian's comment of using a FormControl to manage inputs from the UI. It will save you a lot of time and makes it easier to maintain in my opinion.
Related
I have 2 radio button, (input type radio),i used "checked" on the second, now, if i want to check the first radio button i need to click twice, how di i fix it ??
<label>YES</label> <input type={'radio'} name={'license'}/><br />
<label>NO</label> <input type={'radio'} name={'license'} checked={'checked'}/>
You are using uncontrolled inputs, so the React rendering cycle is interfering with the user modified state of the DOM.
If you continue using uncontrolled inputs, use defaultChecked and not checked. (See default values.)
Controlled components are recommended in most cases though.
when i creat a webpage with Vue,something happen,in this picture.
The checked attribute represents the default, not the current, value.
It doesn't update as the user interacts with the UI.
This is a possible way to reproduce:
document.getElementById("foo").checked = false;
<label for="foo">Click me <input id="foo" type="checkbox" checked="checked"></label>
Your HTML element has a checked property which is usually true or false. You will need to refer that attribute in order to properly detect the value.
I have form with checkbox used in both add/edit mode but have scenario when in edit mode disable the checkbox with its value like checked or unchecked.
I have tried as below but not succeeded,
<input type="checkbox" disabled="disabled" checked="checked">
If an element is disabled, it's value is not posted along with the form, so while the checkbox appears checked, that information is not in the form data.
You may want to store the value in a hidden element, or (better, I think), let the server side script determine the proper default value if it is omitted.
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'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.