find html element, without proper class name or id, with javascript - javascript

I have this HTML code
<div class="option-wrapper">
<label class="">
<input type="checkbox" name="name" value="1" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">1</span>
</label>
<label class="">
<input type="checkbox" name="name" value="2" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">2</span>
</label>
</div>
im trying to find the labels and to set a "style="display: none;"
like this <label class="" style="display: none;>
my problem is, I only need one of the labels in this div. But I don't have a class name or id to find one label. Do u guys know a solution for this?

Use document.getElementsByTagName('label') instead for all end then get them with the array offset. Or - to select the first - use document.getElementByTagName('label'). Notice the singular version of the second selector.
Or, a more general selector which you can use with either classes or tags or any other query string would be document.querySelector('label') or document.querySelectorAll('label')

Related

How can I hide or remove the content outside the input field?

I'm trying to target the content and making the entire input fields hidden or disable specifically the field "Pickup in Store : $0.00".
I can only get the radio button to be hidden but not the text beside the radio button. I know the Labels are global containers but I can see the input fields has a unique ID. Is there a way we can accomplish this e.g. CSS, Javascript or Jquery?
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>
Personally I see three options;
Wrapping both elements in a single div and targeting them together (most straight foward)
Targeting the previous sibling as well (not difficult with css)
Assigning the label an equally descriptive and dynamic id for easier targeting (might require a bit of extra work)
You shouldn't use the label element to wrap the radio and the text.
<div class="form-control">
<label for="option1">Option 1 description</label>
<input type="radio" name="shopping" id="option1" value="option1">
</div>
<div class="form-control">
<label for="option2">Option 2 description</label>
<input type="radio" name="shopping" id="option2" value="option2">
</div>
If you want to relate some text to an input field you can simply add a label element as a sibling of the input element and relate them with the for attribute matching the input's id that's going the make the html structure more solid, you can also use an extra class or add an id for the form-controls div to make it easier to select or if you are already using jQuery you can target these elements parent with something like $('#option1').parent()
No need to hide all the label simply hide its content considering the ID of the input:
#shopping_baskets_attributes_35838_shipping_method_id_915,
#shopping_baskets_attributes_35838_shipping_method_id_915 + *{
display:none;
}
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>

Save values to an array on checkbox inside ng-repeat in AngularJS

I have a scenario in which I have to put values in array when the checkbox is checked in ng-repeat.
<li ng-repeat="player in team.players">
<div class="row">
<div class="col-md-3 m-t-xs">
<input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
</div>
<div class="col-md-5 m-t-xs">
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
</label>
</div>
</div>
</li>
This is how it looks now in browser.
The issue is that when I clicked any of the player name in FC Barcelona Accordion it also selects the same indexed player from FC Bayern Munich Accordion, What I want is to keep all players separate form each-other.
Am i missing something in the binding ??
Use checklist-model, AngularJS directive for list of checkboxes
In Angular one checkbox <input type="checkbox" ng-model="..."> is linked with one model. But in practice we usually want one model to store array of checked values from several checkboxes. Checklist-model solves that task without additional code in controller. You should play with attributes of <input type="checkbox"> tag:
set checklist-model instead of ng-model
set checklist-value - what should be picked as array item
Documentation
This Because of this function: vm.disSelectPlayer($index, player)
I think you have to add index here <li ng-repeat="player in team.players"> in order to give each player different id or index.
Try This :
<li ng-repeat="(key ,player) in team.players">
and use this Key in the function that you call :
vm.disSelectPlayer($index, player , key)
I hope it is useful :)
This is because on on line #4 you wrote
ng-model="vm.newEvent.players[$index].selected".
You have used parents object ie players, instead of this you can use
ng-model="vm.player.selected".
OR
ng-model="vm.team.players[$index].selected".

i18next: overwrites nested items

I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
</div>
</div>
After applying the translation, the actual HTML code is like this:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
translated value (no more <input> tag!)
</label>
</div>
</div>
It overwrites the innerHTML with the translation string.
Instead I need to "save" existing items and append the translation after them.
What is the correct use of i18next on a checkbox form entry?
I had the same problem and I solved it like this:
$('[data-i18n]').each(function each() {
const el = $(this);
const contents = el.contents();
el.text(i18n.t($(this).attr('data-i18n')))
.append(contents);
});
Edit:
The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.
Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:
<label class="form" data-i18n="[append]form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
You can either specify a custom attribute or one of the special attributes like prepend, append, etc. to specify where you want the translated text to appear. More info on jquery i18next doc
Example on jsfiddle
I solved in this way:
<div class="checkbox">
<label class="form">
<input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
<span data-i18n="form.checkbox"></span>
</label>
</div>
The span tag does the trick, embedding the translated content.

Clicking a checkbox using protractor

There is no unique model, id, label names. How am I suppose to check/click the checkboxes?
The html/code is:
<div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
uCPM
</label>
</div>
</div><div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
CPM
</label>
</div>
There is about 15 of these with the same name besides the label next to the name. I searched everywhere to see if protractor allows you to find elements by label.
My attempts are finding via by.buttonText, by.partialButtonText, by.css and by.binding. I have no luck on this.
My purpose is to pass in a label name that I can toggle the specific checkbox.
So it's like element(by.css(header)).click();
where header is what is passed in.
I strongly recommend using ids. Use a directive to add ids to each checkbox, then you can something like this:
element(by.css('input[myid="checkbox_x"]')); // where x is defined in a loop
I'm sure there will be better answer out there. I just started learning protractor :) You can try clicking on it by index.
3 = position.
element.all(by.repeater('column in $parent.columns.standardMetrics').get(3).element(by.css('[ng-model="column.visible"]')).click();
You can use by.xpath():
element(by.xpath('//input[#ng-model = "column.visible" and following-sibling::text() = "' + label + '"]'));
EDIT: missed that the text belonged to the label and not the input.
This should work:
element(by.xpath("//label[text()='uCPM']/input"));
Assign a dinamic id to the elements:
<div ng-repeat="column in $parent.columns.standardMetrics" class="ng-scope">
<label id="label{{$index}}" class="ng-binding">
<input type="checkbox" ng-model="column.visible" name="" class="ng-pristine ng-valid">
uCPM
</label>
</div>
Then on protractor:
element(by.id('label0')).click();
p.s. Just read that you can't change HTML because the website is not yours. Try this:
var first= element.all(by.repeater('column in $parent.columns.standardMetrics')).get(0);
first.get(0).then(function(el) {
el.click();
});

Get bootstrap radio button text - jquery

I'm using bootstrap and I find it confusing when trying to extract the label name. How do I get the selected label text? (e.g. Furniture or Fruits)
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval1" /></span>
<input class="form-control" value="Furniture" disabled>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval2" /></span>
<input class="form-control" value="Fruits" disabled>
</div>
I tried these but did not give the label text:
alert($( $(":radio[name=radioGroup]:checked").prop("labels") ).text());
alert($('input[name="radioGroup"]:checked').text());
alert($('input[name="radioGroup"]:checked + label').text());
In your scenario you just need to get the value of selected radio button.
For your better understanding have a lookto this JS Fiddle link
You can use the selected DOM element as::
alert($("input[name='radioGroup']:checked").closest(".input-group").find(".form-control").val())
Try using .val() then follow the tree from the checkbox up to its containing div and back down to the value in the associated input.
alert($("input[name=radioGroup]:checked").parent(".input-group-addon").parent(".input-group").children("input.form-control").val());
You can try this...
$('input[name="radioGroup"]:checked').parents('.input-group').find('.form-control').val()
OR
$('input[name="radioGroup"]:checked').parent().next().val()

Categories

Resources