Select checkbox if not selected with Protractor - javascript

I try execute in protractor following scenario:
Find checkbox
Check if it is selected
If yes - go further
If not - select it and go further
For some reason isSelected() function is not working with my checkbox, but I've found some solution. Below code works correctly:
expect(checkbox.getAttribute('aria-checked')).toEqual('false')
It checks some checkbox attribute which is 'false' if not selected and 'true' if selected. (but as a string)
Now the main question. How to write an 'if / else' statement to make it works?
I tried something like that:
if (expect(checkbox.getAttribute('aria-checked')).toEqual('false')) {
checkbox.click();
}
But it always clicks on checkbox no mater if it was selected or not. I've tried also:
if (checkbox.getAttribute('aria-checked').toEqual('false')) {
checkbox.click();
}
But there is an error which says "It's not a function".
Could anybody help me with that?

You can use the below method to solve the problem.
Before clicking any any checkbox, check for the value of aria-checked attribute, if its true don't do anything. Otherwise click on it.
checkBoxElement.getAttribute("aria-checked").then(function(isChecked){
if(isChecked == "false") { //getAttribute will return the value as string.
checkBox.click();
}
})

You could try to make some helper function:
function setCheckBoxTo(locator, value){
var checkbox = element(locator);
checkbox.isChecked().then(function(selected){
if(selected !== value){
checkbox.click();
}
}
}
where [value is true/false]

Related

Resetting specific form input with jQuery

I currently have a radio that displays an additional input field if clicked and hides that input field if another radio is selected. What I am looking to accomplish is that when another radio input is clicked i'd like to clear that text input of any value that was put in it.
I am also utilizing MUI CSS for floating labels on form inputs which appends the .mui--is-empty class to fields that are empty and .mui--is-not-empty class to fields that contain values.
I've tried the following:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'tip-custom') {
$('#show-me').fadeIn();
} else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val('');
}
});
});
But this just sets the value to "" where I need to completely reset this specific field for the .mui--is-empty to append back to it.
Here's is a gyazo of what I am experiencing which you can see the starting state of the floating label and how it reacts when cleared.
https://gyazo.com/b848a5855d27b2d6ebd9202bda7fabe9
Is there a way to completely reset the text input as if there is actually no value?
UPDATE
I was able to accomplish what I was trying to do with the following script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
But i'm concerned that even if the value is set to '' will it return anything on form submit? I would prefer that if there is no actual value that it did not.
I'm not sure my answer is right or wrong because I cant check part of the code. I think you have a typo in your code. So, I think I could fix it. Please, check this code if it works:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name="tip-custom-value"]').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
The typo was inside else statement. I think you forgot to close square brackets for your code.
I hope it works.

Check if checkbox is checked using next() in JQuery

I need to check if a checkbox next to a textbox is checked or not, but the result I'm getting from that condition in my code is always true, so that's wrong.
I've made some tests using the next() method from jQuery. I'm pointing to the next checkbox close to the textbox, which is working fine.
This code is always returning true, whether the checkbox is checked or not:
if ($(this).next('.isFileSelected:checkbox:checked')) {
//do some other stuff...
}
I tried these changes too, but I'm getting the same results:
if ($(this).next('input:checkbox:checked')) {
//do some other stuff...
}
How can I accomplish this using jQuery or pure JavaScript code?
You're looking for the prop() attribute checked:
if ($(this).next('.isFileSelected:checkbox').prop('checked')) {
// Checked
}
Or, alternatively, you can use .is() to check for the :checked pseudo-selector:
if ($(this).next('.isFileSelected:checkbox').is(":checked")) {
// Also Checked
}
Hope this helps! :)

jQuery returns checkboxes as all checked even if only one is checked

As per this JSFIDDLE --
I have been going crazy trying to figure this out for last 48 hours. Everything works except for the checkbox. I included the isolated snippet of code that is causing the issue in this.
After I created boxes (pressing checkbox button) and finalize the form, I was successful in seeing code and was able to serialize checkboxes into JSON - but, I ended up getting 'on' for all checkboxes even though if only one of them is checked.
When I checked only one (first box) and other boxes unchecked, and clicked 'save', I get this as result:
{"ck1":"on","ck2":"on","ck3":"on","submit1":"save"}
What was it that threw the result off? Am I doing something wrong in this code?
A help would be appreciated in identifying the issue.
My goal is to see JSON in this format when I have first checkbox checked:
{"ck1":"on","submit1":"save"} or any format that you would suggest.
EDITED:
Find below the function I assinged to submit event:
$('#form'+formnum).submit( function(e) {
e.preventDefault(e);
var data = {};
//Gathering the Data
$.each(this.elements, function(i, v){
var input = $(v);
data[input.attr("id")] = input.val();
//delete data[button.attr("id")]; <-- cant' figure it out
//removeData[submit] <-- cant' figure it out
}); // end of $.each
var output =JSON.stringify(data);
$('#showurl').text(output);
}); //end of 'save' button function
JSFIDDLE: jsfiddle.
You are getting the value from the checkboxes, and the value is always the same regardless of the state of the checkbox.
Check the type of the element to get the state for checkboxes:
if (input.is(':checkbox')) {
if (input.is(':checked')) {
data[input.attr("id")] = input.val();
}
} else {
data[input.attr("id")] = input.val();
}
If you only want data from the checkboxes, you can just filter out the the checked checkboxes from start:
$(':checked', this).each(function(i, v){ data[v.id] = v.value; });
You're arbitrarily assigning the value of all inputs, you're not actually checking the checked state.
Add a conditional line for:
data[input.attr("id")] = input.val();
Something like:
if (/* (input is a checkbox and checkbox is checked) or input is not a checkbox*/) {
data[input.attr("id")] = input.val();
}
You also need an exception for radio buttons.

Change disabled select(dropdownlist) based on another select(dropdownlist) value

Basically what I'm trying to do is self-explanatory in the title. Here's a snippet of code which enables the dropdown/select so it can be changed via client, but it will not disable after change:
function setLocVals(passedVal) {
$('#DropDownList1').removeAttr("disabled");
$('#DropDownList1').val(passedVal);
$('#DropDownList1'').attr("disabled", "disabled");
}
Is this even possible? Or am I looking at this completely the wrong way?
I could change to a textbox, but this is a dropdown containing US states. If there's a record for the user then the selection is restricted for the user, if no record exists, then they can select.
Just put a condition when you have to disable. See this fiddle
Use this approach.
First set the value in option.
Then retrieve the current value of the option and check if it is set to the one than you have passed then put the condition to disable else not
function setLocVals(passedVal) {
$('#DropDownList1').val(passedVal);
var value = $('#DropDownList1').val();
if(value == passedVal){
$('#DropDownList1').attr("disabled", "disabled");
}
}

run function if EITHER statement is true

This below is a snippet from the code that I am working on. The short version of this is when a radio button with a label of NO is NOT checked, then the details textbox will show. I simply want to add another condition which allows the box to be shown IF another label is checked.
Example: IF 'NO' OR 'HOW MANY PEOPLE' are checked, then show the textbox.
I have been trying using the pipes but to no success.
if ($this.siblings('label').text() != 'No') {
if ($this.is(':checked')) {
$details.show();
$prompt.hide();
}
}
Thanks to anyone in advance, I know this is a simple question Im just a bit stuck!
Use an OR boolean :
if ($this.siblings('label').text() != 'No' || $this.is(':checked'))
$details.show();
$prompt.hide();
}
In your case, you were doing an AND boolean (which is coded in javascript by &&)
More info on javascript booleans here : http://www.quirksmode.org/js/boolean.html
Max

Categories

Resources