I need a default checkbox on for users one while loading this page ie I need to search for users as default while submitting for and also users checkbox must be checked initially while loading
I am sorry I am new to angular searched a lot for this thing please help
<form (submit)="abc(postform)" #postform="ngForm">
<input type="text" placeholder="Enter your search" name="searchparam" ngModel #searchparam="ngModel" required >
<input type="checkbox" name="users" [checked]=true ngModel #users="ngModel" id="users" [checked]="user" onclick="if(users.checked) {pets.checked=false}" required />users
<input type="checkbox" name="pets" id="pets" ngModel #pets="ngModel" onclick="if(pets.checked) {pets.checked=false}" />pets
</form>
You cannot have [checked] bound to two different values, that will not work. A better solution is to set [checked] to "user" as you have done the second time, and then set user to true. So your code would change to
<input type="checkbox" name="users" ngModel #users="ngModel" id="users" [checked]="user" onclick="if(users.checked) {pets.checked=false}" required />
and then is ts, set user to be true when you define it
user = true
Related
I have an input set to read-only
<input type="text" placeholder="{some variable}" class="form-control" readonly>
When I open this in chrome, I cannot copy the text, which is important. I have tried also 'disabled' status, but the same issue.
What is the way to set the code so I can copy the value from the browser?
Big thanks!
You need to set the value of that input-field instead of the placeholder:
<input type="text" value="{some variable}" class="form-control" readonly>
I would like to know how to make a checkbox checked if the value is true, and unchecked if false with Angular2.
Adult <input type="checkbox" value="{{person.is_adult}}">
{{person.is_adult}} is a boolean
Can someone please suggest anything? Thanks
{{}} does string interpolation and stringifies true and false and Angular by default uses property binding and I assume the property expects boolean values not strings:
<input type="checkbox" [checked]="person.is_adult">
This might work as well
<input type="checkbox" attr.checked="{{person.is_adult}}">
because with attribute binding the browser might translate it from the attribute (which can only be strings) to boolean when reading it into its property.
It is also checked instead of value
You can also use ngModel
<input type="checkbox" [ngModel]"person.is_adult" name="isAdult">
<input type="checkbox" [(ngModel)]"person.is_adult" name="isAdult">
for one-way or two-way binding.
Ensure your have the FormsModule imported if you use ngModel.
you are missing square bracket around checked
<input type="checkbox" [checked]="person.is_adult">
Hope this helps!!
Try the following :
<input type="checkbox" [checked]="person.is_adult">
If you are using ngModel :
When ngModel is used in a form it won't work. However, you should use [ngModelOptions] attribute like
<input
type="checkbox"
name="is_adult"
[(ngModel)]="person.is_adult"
[ngModelOptions]="{standalone: true}"/>
Suppose this checkbox snippet:
<input type="checkbox" value="1">Is it worth?</input>
Is there any reason to statically define the value attribute of checkboxes in HTML? What does it mean?
I hope I understand your question right.
The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server).
Now the server gets the name (if defined) and the value.
<form method="post" action="urlofserver">
<input type="checkbox" name="mycheckbox" value="1">Is it worth?</input>
</form>
The server would receive mycheckbox with the value of 1.
in PHP, this POST variable is stored in an array as $_POST['mycheckbox'] which contains 1.
I just wanted to make a comment on Adriano Silva's comment.
In order to get what he describes to work you have to add "[]" at the end of the name attribute, so if we take his example the correct syntax should be:
<input type = "checkbox" name="BrandID[]" value="1">Ford</input>
<input type = "checkbox" name="BrandID[]" value="2">GM</input>
<input type="checkbox" name="BrandId[]" value="3">Volkswagen</input>
Then you use something like: $test = $_POST['BrandID']; (Mind no need for [] after BrandID in the php code).
Which will give you an array of values, the values in the array are the checkboxes that are ticked's values.
Hope this helps! :)
One reason is to use the ease of working with values in the system.
<input type="checkbox" name="BrandId" value="1">Ford</input>
<input type="checkbox" name="BrandId" value="2">GM</input>
<input type="checkbox" name="BrandId" value="3">Volkswagen</input>
When the form is submitted, the data in the value attribute is used as the value of the form input if the checkbox is checked. The default value is "on".
$('form').on('change', update).trigger('change')
function update() {
var form = $(this)
form.find('output').text('→ ' + form.serialize())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="foo">
<output></output>
</form>
<form>
<input type="checkbox" name="foo" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="1" checked>
<output></output>
</form>
<form>
<input type="checkbox" name="foo" value="bananas" checked>
<output></output>
</form>
For the sake of a quick glance answer, from MDN
when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute
It can be confusing because seeing something like
<input type='checkbox' name='activated' value='1'> might lead one to believe that the 1 means true and it will be treated as though it is checked, which is false. The checked attribute itself also only determines if the checkbox should be checked by default on page load, not whether it is currently checked and thus going to be submitted.
We all know how to form a checkbox input in HTML:
<input name="checkbox_name" id="checkbox_id" type="checkbox">
What I don't know -- what's the technically correct value for a checked checkbox? I've seen these all work:
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">
Is the answer that it doesn't matter? I see no evidence for the answer marked as correct here from the spec itself:
Checkboxes (and radio buttons) are on/off switches that may be toggled
by the user. A switch is "on" when the control element's checked
attribute is set. When a form is submitted, only "on" checkbox
controls can become successful. Several checkboxes in a form may share
the same control name. Thus, for example, checkboxes allow users to
select several values for the same property. The INPUT element is used
to create a checkbox control.
What would a spec writer say is the correct answer? Please provide evidence-based answers.
Strictly speaking, you should put something that makes sense - according to the spec here, the most correct version is:
<input name=name id=id type=checkbox checked=checked>
For HTML, you can also use the empty attribute syntax, checked="", or even simply checked (for stricter XHTML, this is not supported).
Effectively, however, most browsers will support just about any value between the quotes. All of the following will be checked:
<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">
And only the following will be unchecked:
<input name=name id=id type=checkbox>
See also this similar question on disabled="disabled".
HTML5 spec:
http://www.w3.org/TR/html5/forms.html#attr-input-checked :
The disabled content attribute is a boolean attribute.
http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
Conclusion:
The following are valid, equivalent and true:
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="ChEcKeD" />
The following are invalid:
<input type="checkbox" checked="0" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />
The absence of the attribute is the only valid syntax for false:
<input />
Recommendation
If you care about writing valid XHTML, use checked="checked", since <input checked> is invalid XHTML (but valid HTML) and other alternatives are less readable. Else, just use <input checked> as it is shorter.
<input ... checked />
<input ... checked="checked" />
Those are equally valid. And in JavaScript:
input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
you want this i think:
checked='checked'
checked
checked=""
checked="checked"
are equivalent;
according to spec checkbox
'----ⓘ checked = "checked" or "" (empty string) or empty
Specifies that the element represents a selected control.---'
It's pretty crazy town that the only way to make checked false is to omit any values. With Angular 1.x, you can do this:
<input type="radio" ng-checked="false">
which is a lot more sane, if you need to make it unchecked.
I think this may help:
First read all the specs from Microsoft and W3.org.
You'd see that the setting the actual element of a checkbox needs to be done on the ELEMENT PROPERTY, not the UI or attribute.
$('mycheckbox')[0].checked
Secondly, you need to be aware that the checked attribute RETURNS a string "true", "false"Why is this important? Because you need to use the correct Type. A string, not a boolean. This also important when parsing your checkbox.
$('mycheckbox')[0].checked = "true"
if($('mycheckbox')[0].checked === "true"){
//do something
}
You also need to realize that the "checked" ATTRIBUTE is for setting the value of the checkbox initially. This doesn't do much once the element is rendered to the DOM. Picture this working when the webpage loads and is initially parsed.
I'll go with IE's preference on this one: <input type="checkbox" checked="checked"/>
Lastly, the main aspect of confusion for a checkbox is that the checkbox UI element is not the same as the element's property value. They do not correlate directly.
If you work in .net, you'll discover that the user "checking" a checkbox never reflects the actual bool value passed to the controller.
To set the UI, I use both $('mycheckbox').val(true); and $('mycheckbox').attr('checked', 'checked');
In short, for a checked checkbox you need:
Initial DOM: <input type="checkbox" checked="checked">
Element Property: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true); and $('mycheckbox').attr('checked', 'checked');
Just like all input's, this one also has a 'value' attribute. If you set the value attribute along with the name attribute, it will send ${name}=${value} in the headers. Let's say we had a form with a bunch of stuff and we wanted the user to decide what roles they have, we could use a checkbox. The easiest way is to set the 'value' attribute which will be passed along to the server. Like this:
<form action="/server" method="post">
<label>Are you a person?</label>
<input type="checkbox" name="my_checkbox" value="is_person">
</form>
The server will receive the following:
my_checkbox=is_person
but only if the checkbox is checked. This would be
my_checkbox=
if it is empty.
This is the exact same with radio inputs.
But.. I have a feeling this isn't what you're asking for... So just encase I'll write another answer below:
If the checked attribute is set to anything (even false) it will be activated, no matter what. The checked attribute doesn't have a specified value, if it's set to anything it will default to 'true' (even if you set it to false).
For example:
<form action="/server" method="post">
<label>Are you a person?</label>
<input type="checkbox" checked="false"> <!--Still checked-->
</form>
Will be checked even though it's set to false.
<form action="/server" method="post">
<label>Are you a person?</label>
<input type="checkbox" checked="asjdiasjiasdjoasi"> <!--Still checked-->
</form>
Doing this will also check it. It doesn't matter -- as long as it's set it will be checked.
Hope this answers your question, the checked attribute will check the input no matter the value of the attribute.
You can test it here: https://battledash-2.github.io/Live-IDE/
or anywhere like repl.it, or locally.
The technically correct value for a checked checkbox is zero (0), and when the checkbox is not checked, it's index is not defined.
Well, to use it i dont think matters (similar to disabled and readonly), personally i use checked="checked" but if you are trying to manipulate them with JavaScript, you use true/false
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.