Trying to identify the Active check box[Not the Active text]. I tried the following 2 items[which did not work]:
//div[#class='b-hide-xs']//input[#id='active-filter']/following-sibling::i
(//span[text()='Status']/../..//div[#class='b-ml-large']//span[text()='Active'])[2]
Active
I noticed this 1 worked: div.b-hide-xs i.b-custom
Problem: this selects 3 items Active, Expired and Inactive. Is there anything like array that can be used so that I can select any one of those 3, for example (div.b-hide-xs i.b-custom)1
<div class="b-checkbox">
<label for="expired-filter" class="">
<input type="checkbox" id="expired-filter" value="on">
<i class="b-custom"></i>
</label>
</div>
<div class="b-checkbox">
<label for="inactive-filter" class="">
<input type="checkbox" id="inactive-filter" value="on">
<i class="b-custom"></i>
</label>
</div>
You can get the elements in a list and use basic array indexing to access them:
elements = driver.find_elements_by_css_selector("div.b-hide-xs i.b-custom")
elements[0].click()
elements[1].click()
# etc..
Or:
for element in element:
element.click()
Related
I want to create a dynamic form where I also apply JavaScript to the dynamic elements.
What I want to do right now is figure out which field (stored in array or whatever data structure) in JavaScript has been clicked so that I can apply the script to that particular field.
The HTML looks like this:
<div class="triple">
<div class="sub-triple">
<label>Category</label>
<input type="text" name="category" id="category" placeholder="Classes/Instances" required/>
<ul class="cat-list"></ul>
</div>
<div class="sub-triple">
<label>Relation</label>
<input type="text" name="relation" id="relation" placeholder="Properties" required/>
<ul class="rel-list"></ul>
</div>
<div class="sub-triple">
<label>Value</label>
<input type="text" name="value" id="value" placeholder="Classes/Instances" required/>
<ul class="val-list"></ul>
</div>
</div>
This "triple" div is dynamic and I want to create as many "triples" as the user wants, that also means the input fields of inside the "triple" section increase as well.
I'm confused on how to add javascript to one element of the input. For example I have inputs: category, relation and value and the user wanted 2 or more triples then the input ids could look like category2, relation2 and value2 or something similar to that.
let category = document.getElementById("category");
category.addEventListener("keyup", (e) => {
removeElements();
listDown(category, sortedClasses, ".cat-list")
});
If I lets say clicked on category2 for instance how do I tell that to my javascript since these fields are completely dynamic.
Summary: The user is adding repeat sections of triples (containing 3 input elements), where the id of each input element is generated dynamically. My script above works for the first triple section only as the ids are fixed, as for successive "triple" section the id of the fields get changed. How do I identify (see which element has been clicked) and get these dynamic ids
Try listening to the parent element and then using the event's target to figure out the identity of the input. Since the child elements events will bubble up you'll be able to listen to all children
e.g.
let parentElement = document.querySelector(".triple");
parentElement.addEventListener("click", (e) => {
console.log(e.target.id);
});
You can use the onfocus event
<div class="triple">
<div class="sub-triple">
<label>Category</label>
<input type="text" name="category" id="category" placeholder="Classes/Instances" onfocus="onFocusCategoryInput()" required/>
<ul class="cat-list"></ul>
</div>
<div class="sub-triple">
<label>Relation</label>
<input type="text" name="relation" id="relation" placeholder="Properties" onfocus="onFocusRelationInput()" required/>
<ul class="rel-list"></ul>
</div>
<div class="sub-triple">
<label>Value</label>
<input type="text" name="value" id="value" placeholder="Classes/Instances" onfocus="onFocusValueInput()" required/>
<ul class="val-list"></ul>
</div>
</div>
I have some checkboxes generating through a foreach loop. All I want, by checking one checkbox another checkbox will be checked. I have already tried something like this,
This is the foreach block where the checkboxes are generating.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
This is the script I tried
var chk1 = $("#selectTest");
var chk2 = $("#testPrice");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
in this case, the first checkbox only works fine, but rest of them are not working.
It only works for the first checkbox only because id= attributes only match the first matching node in the DOM. Use a class (.selectTest) instead.
You may need to get rid of id="testPrice" as well or make it a class instead.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
The jquery script.
var chk1 = $(".selectTest");
chk1.on('change', function(){
$(this).closest("div").next().prop('checked', $(this).is(":checked"));
});
id attribute
The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
I have a checkbox with 3 Values
'Father' , 'Mother' and Secretary. I tried to target individual checkboxes values but the issue is that i don't know the ID/name of the tag.
I can't use getElementById , getElementByClass etc...
I tried to add a specific CSS class 'SPECIFIC_CSS' but gforms added it to the li tag. I can only identify the value of the checkboxes (Father,Mother,Secretary).
How can I target those specific checkboxes? can i target their values ? How? Do you have another method i didn't think of ?
<li id="field_31_3-1-1" class="gfield SPECIFIC_CSS field_sublabel_below field_description_below gfield_visibility_visible gf_repeater_child_field" data-repeater-parentid="1" data-repeater-repeatid="1" data-repeater-childid="1">
<label class="gfield_label">Checkboxes Test 1</label><div class="ginput_container ginput_container_checkbox"><ul class="gfield_checkbox" id="input_31_3">
<li class="gchoice_31_3_1">
<input name="input_3.1-1-1" value="Father" id="choice_31_3_1-1-1" tabindex="1" data-repeater-inputid="1" type="checkbox">
<label for="choice_31_3_1-1-1" id="label_31_3_1">Father</label></li>
<li class="gchoice_31_3_2">
<input name="input_3.2-1-1" value="Mother" id="choice_31_3_2-1-1" tabindex="1" data-repeater-inputid="2" type="checkbox">
<label for="choice_31_3_2-1-1" id="label_31_3_2">Mother</label></li>
<li class="gchoice_31_3_3">
<input name="input_3.3-1-1" value="Secretary" id="choice_31_3_3-1-1" tabindex="1" data-repeater-inputid="3" type="checkbox">
<label for="choice_31_3_3-1-1" id="label_31_3_3">Secretary</label>
</li></ul></div></li>
You could use something like the following:
document.querySelector('input[value="Father"]').checked = true;
or if you just want the element without checking it:
document.querySelector('input[value="Father"]');
I asked how to select more checkbox by value, and it works well.
See here the question: Select more checkbox by value or id
But now I would like to know if you can select these checkboxes if I have 2 divverenti div, here is an example:
<div class="checkbox_option1">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
<div class="checkbox_option2">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
I would like that the toggle select only those of the <div class="checkbox_option2"> it's possible? Many Thanks
Check out jQuery child selectors, I think it will be of use: https://api.jquery.com/child-selector/
Building off the solution to your prior question, you would use something along these lines:
var check_germany = $(".checkbox_option2 > input:checkbox[value=Germany]");
Yes use parent-child selectors (using >) if they're direct children like:
$("div.checkbox_option2 > input:checkbox[value=Germany]")...
Or just a space () if they're children or children of children ...etc like:
$("div.checkbox_option2 input:checkbox[value=Germany]")...
In your case the second one will work.
More about CSS selectors here.
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).