Javascript, checkbox 'checked' state - checked

I use next code:
<input class='checkbox' type='checkbox' id='agr_check' name='agreement' value='agreement'></input>
and
var ag_check = document.getElementById('agr_check');
alert(ag_check.checked);
if checkbox is checked first, javascript returns 'true'. but if i uncheck checkbox and then check it again, this javascript returns 'false'.
can you tell me why? and how to fix this problem?

Related

Firefox input type=date min not opening on minimum valid month

I'm not sure if there's a way around this, but Firefox doesn't play nicely when you're using input type="date" with a min= attribute: It always open the datepicker on the current month, rather than the month where the minimum valid date begins. This is particularly annoying if the date is in the future.
For example:
<input type="date" min="2021-08-04">
(See JSFiddle in Firefox.)
The user has to manually scroll through months until they finally get to the one that's available. Less than ideal!
One way to bypass this behaviour is to set a value to the input as suggested in the comments. Instead of setting value attribute in the HTML, you can try to set it programmatically when the user clicks on the input and the datepicker is shown.
I think that focus/focusin are the best events to use to catch, since as far as I know there is no show/open events on input[type="date"].
On MDN page, in the Events sections are mentioned only change and input.
Here a live sample:
var dateControl = document.querySelector('input[type="date"]');
dateControl.addEventListener("focus", function(){
// You can add validation on value
if( this.min && !this.value ){
this.value = this.min;
}
});
<input type="date" min="2021-08-08">
I know this is not a really great solution as the browser can be tricked any time.
But this should work too.
HTML : <input id="dateInput" type="date" min="2021-08-08">
You can identify the browser of the client if it is Firefox and change the date automatically to become the minimum through this JS:
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("dateInput").value = document.getElementById("dateInput").min;
}
You can use value attribute to set the default value.
<input type="date" min="2021-08-04" value="2021-08-04">

Angular checkbox labels not firing change events

i have implemented a group checkbox component as explained in this SO post:
Angular how to get the multiple checkbox value?
All is working well except i have one issue, the labels of the check boxes do not trigger change events, only the actual checkbox portion. In the plunker below, try clicking both the checkbox square and the label, both trigger the checkbox and update the data model but only the checkbox portion fires a change. I suspect its something to do with the transcluded value.
See this plunker
http://plnkr.co/edit/BAhzLYo9e4H8PdAt9lGR?p=preview
Code
<checkbox-group [(ngModel)]="selectedItems">
<checkbox *ngFor="let item of availableItems"
[value]="item"
(change)="onItemChange($event, item)">
{{item}}
</checkbox>
</checkbox-group>
<p>Selected items - {{selectedItems | json}}</p>
Use on click event listener instead of on change. like this
(click)="onItemChange($event, item)"
If you are using ngModel, you can also use the (ngModelChange) event.
I have some normal checkboxes <input type="checkbox"/>, and the (click) and the (change) events are never fired.
With (ngModelChange), it works (should also work with other tags than <input type="checkbox"/>, if they are using ngModel):
<input type="checkbox"
(ngModelChange)="selectAllForBatchImport($event)"
[ngModel]="areAllEntriesChecked"/>
The $event parameter will be a boolean if ngModelChange is fired from a checkbox (instead of e.g. a MouseEvent when using (click) or (change)).
By using ngModel and ngModelChange, you split up the banana-box [(ngModel)], so that you can do the change (and maybe additional work) yourself, instead of [(ngModel)], which does a "simple" ngModelChange-update by itself.

reduxForm v5.3.1 uncontrolled/controlled warning on checkbox

So, here is the warning:
Warning: UserInviteForm is changing an uncontrolled input of type checkbox to be controlled.
After looking at this ticket for reduxForm v5 and others, It seems that I am getting this warning because the initial value for the field is undefined and so the input value attribute needs to be initialized with either the fields value || "".
Do a little further research, controlled checkboxes need the checked attribute set to a value.
So my assumption is that the way to clear the warning would be to write the input tag in one of two ways:
<input
{...isPrimary}
value={isPrimary.value || ''}
type="checkbox"
>
OR
<input
{...isPrimary}
checked={isPrimary.checked || ''}
type="checkbox"
>
For good measure I also tried checked={isPrimary.checked || false} and value={isPrimary.value || false} and the combination of both together.
I even tried setting the checked and value property of the isPrimary on component mount but still nothing can get rid of the warning.
Also, I want to add, I know that there is a reduxForm v6 out, but this is the current version of our deployed app that we are working to fix and reduxForm v6 is coming in a future deployment version of our app.
Anyone got any insight to solving this problem?
I tried one more thing and figured out the solution.
I was able to get this to work by setting the initial value of the field when connecting the reduxForm, then set the value of the input to that intitial value.
UserInviteFormContainer = reduxForm({
form: FORM_ID,
fields: FIELD_NAMES,
initialValues: {
isPrimary: false,
},
validate,
})(UserInviteFormContainer);
<input
{...isPrimary}
value={isPrimary.initialValue || ''}
type="checkbox"
>

Fetching visible text from a dropdown in protractor

I am trying to fetch visible text from a dropdown which does not have a selected option.
For dropdown which has selected option, i am using below code to fetch value from dropdown.
DenominationDropdown = element(by.css('[id*="MainContent_uxDenomination"] select'));
expect(DenominationDropdown.element(by.css('[selected="selected"]')).getText()).toBe('All Denominations');
In my second dropdown, there is selected value is not getting populated. I want to fetch current visible value (default value) which in my case is "All Dates" but below code is not working as there is no selected value.
DatesDropdown = element(by.css('[id*="MainContent_uxDates"] select'));
expect(DatesDropdown.element(by.css('[selected="selected"]')).getText().toBe('All Dates');;
Can someone please suggest a way in protractor to read current visible text or default value of dropdown?
HTML of dropdown:
<select name="ctl00$ctl00$ctl00$ctl00$body$body$MainContent$MainContent$uxDates" id="ctl00_ctl00_ctl00_ctl00_body_body_MainContent_MainContent_uxDates" class="ClassName">
<option value="%">All Dates</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
.......
</select>
If it doesn't actually have the attribute selected=selected in the HTML, there should be another way. I tried this in my app on a dropdown and it worked fine:
var el = element(by.model('myDropdown')).$('option:checked');
expect(el.getText()).toEqual('test');
Note the above was for a dropdown, I originally thought it would be option:selected but that threw an invalid locator error. I have done this for radios in the past too:
var el = $('input[type=radio]:checked');
And, in case you werent aware, the $ is syntax equivalent to element(by.css())
getText() should return you the visible text only, by definition, which means that, if you call it on your select element, you should get the currently "selected" option:
expect(DatesDropdown.getText()).toEqual('All Dates');
In the case that doesn´t work with $.('option:checked'). you can try with add to end element(by.css('option:checked'));
var el = element(by.model('myDropdown')).element(by.css('option:checked'));
expect(el.getText()).toEqual('test');

Getting a value from a label at POST

There's a place into my screen that I populate a label with a specific string value after some interaction with my user during the runtime. I use javascript for that.
Is there anyway to get the value of this lavel with my controller after its POST method is activated ?
Thanks, guys !
Option #1
Put the value in an HTML <input> element with a name attribute? Might need to dress down
the input element, since it will look like a textbox.
Option #2
Mirror the value in a hidden input <input type="hidden" value="yourValue" /> inside the form you're posting.