Not getting text by getText() or getAttribute("innerHTML") - javascript

getAttribute, everything but not getting the text along perticula combobox.
I want to get the text along with each combobox.
<small>
<input type="checkbox" checked="checked" value="on" name="irOperations[0]"/>
Account Activity
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[1]"/>
Current Day Balances
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[2]"/>
Current Day Transactions
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[3]"/>
Prior Day Balances
<br/>
<input type="checkbox" checked="checked" value="on" name="irOperations[4]"/>
Prior Day Transactions
<br/>
<li class="xc">
</small>

What you can do:
Wrap your text with <label></label>
Connect your text with your checkbox with an ID
Then you can get the innerHTML from that label
Example:
HTML
<input id="account-activity" type="checkbox" checked="checked" value="on" name="irOperations[0]">
<label for="account-activity">Account Activity</label>
JavaScript
document.querySelector('[for="account-activity"]').innerHTML

This will return an array with "name" as index and next content of it as value
var comboboxes = document.getElements('input[type="checkbox"][name]');
var output = [];
comboboxes.forEach(function(combobox) {
output[combobox.getAttribute('name')] = combobox.nextSibling.textContent.trim();
});
console.log(output);
or
document.getElement('input[type="checkbox"][name="irOperations[1]"]').nextSibling.textContent

Well you can't get innerHTML or getText of elements which are "self-contained" e.g <input />
One way you do it by using HTML5 data attributes and giving each element an ID:
<input type="checkbox" id="account_activity" data-detail="Account Activity" checked="checked" value="on" name="irOperations[0]"/>
Account Activity
<br/>
This way you can use following JS to get the value:
var combo_element = document.getElementById("account_activity");
alert(combo_element.getAttribute("data-detail"));

Related

Count total number of checkboxes what are checked and show on page via JS

I want to show the total number of checkboxes that user has selected on the page. Here is my code.
<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C
<p>Total Number of Items Selected = <p>
Please provide the javascript code needed to achieve this. I know this has been asked before but i failed to benefit from those answers as they required me to edit the JS code to fit to my HTML, which i am not capable of at this point.
You could use .querySelectorAll() method to select all the elements you want to target then use length method that will return the number of cheched element like :
document.querySelectorAll('input[name="fruit"]:checked').length;
_______________________________________________^^^^^^^ //Used to select just checked inputs
NOTE: The use of name selector input[name="fruit"] target just the desired input's instead of all the document checkbox's.
Live example using jQuery :
$('input[name="fruit"]').click(function() {
console.log(document.querySelectorAll('input[name="fruit"]:checked').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C
You can use a querySelector.
document.querySelectorAll("input:checked").length;
Note that this will select all checkboxes in the document. If you just want to refer to a certain group of checkboxes, give all the checkboxes in the group the same name and refer to them like this:
document.querySelectorAll("input[name='name']:checked").length;//replace 'name' with the name of the checkboxes
<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C
<p id="result">Total Number of Items Selected = <p>
<script>
showChecked();
function showChecked(){
document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;
}
document.querySelectorAll("input[name=fruit]").forEach(i=>{
i.onclick = function(){
showChecked();
}
});
</script>
While you've requested a JavaScript solution, this can be achieved with CSS alone:
/* specifies the named counter that will be incremented by
each checked check-box: */
input[type=checkbox]:checked {
counter-increment: checked;
}
/* shows the counter in the '::after' pseudo-element of the
sibling <p> element: */
p::after {
content: ' ' counter(checked);
}
<input type="checkbox" name="fruit" />A
<input type="checkbox" name="fruit" />B
<input type="checkbox" name="fruit" />C
<p>Total Number of Items Selected =</p>

ID.length doesnt return the expected value

i have 3 checkbox with same ID. When I try to do following in the javascript I get the output as 9. Can you see where am I going wrong?
onclick of checkbox; I calling a function --> chkBoxCount(this);
function chkBoxCount(chk){
alert(chk.id.length;}
EDIT:
<input type="checkbox" name="f_seizure" id="f_seizure_1" onclick="chkBoxCount(this);" value="0"> No known episode
<input type="checkbox" name="f_seizure" id="f_seizure_2" onclick="chkBoxCount(this);" value="1"> EEG
<input type="checkbox" name="f_seizure" id="f_seizure_3" onclick="chkBoxCount(this);" value="2"> Suspected/Clinical
You said that you expected 3 as result, so if i'm understanding, you want to count the number of checkboxes with the same name. This is how to do it, enjoy ^^
chkBoxCount = function() {
alert($("input[name=f_seizure]").length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="f_seizure" id="f_seizure_1" onclick="chkBoxCount();" value="0"> No known episode
<input type="checkbox" name="f_seizure" id="f_seizure_2" onclick="chkBoxCount();" value="1"> EEG
<input type="checkbox" name="f_seizure" id="f_seizure_3" onclick="chkBoxCount();" value="2"> Suspected/Clinical
It should be:
<input type="checkbox" name="vehicle" value="Bike" id="bike" onclick="chkBoxCount(this)" > I have a bike</input>
function chkBoxCount(chk){
var id = chk.id;
id = id.split("");
alert(id.length);
}
What this does is get the passed element's id, substring it into indivual characters, and then alert the number of characters. This has been tested; It works! Hope this helped!

Display custom HTML5 data attributes from selected radio buttons

I am attempting to retrieve custom data attributes from selected radio buttons from multiple button groups and display them for the user.
Here is an example of the radio buttons I am working with:
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool"/>
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool"/>
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping"/>
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping"/>
<span id="quote-items" name="quote-items"></span>
I am currently using this jQuery to extract the data attributes from the selected radio buttons but currently only the top-most radio button loaded in the DOM will only display as my output:
var itemNames = [$(".calc:checked").attr("data-selection-name")];
$("#quote-items").text(itemNames)
Thanks!
Whenever you use .attr(key) method it will always fetch you the value of first matched element. To get the value from all matched element, you need to iterate, there are various methods for that. .each() can be used to iterate and push the value in an array.
Here I have used .map() to get an array of attribute value for checked checkbox
$('.calc').change(function() {
var itemNames = $(".calc:checked").map(function() {
return $(this).attr("data-selection-name")
})
.get() //Get an array
.join(',') //Generate Comma seperate string;
$("#quote-items").text(itemNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool" />
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool" />
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping" />
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping" />
<span id="quote-items" name="quote-items"></span>
Additionaly, You can use Element.dataset property to access data-* prefixed attribute like
this.dataset.selectionName;
instead of
$(this).attr("data-selection-name");
How to
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="productname" ata-selection-price="productprice" />
$("#sonuc-v2").text(data-selection-price);
$("#sonuc-v2").text(data-selection-price);

Dynamically adding sets of radio inputs

So I have dynamic form that I create and there could be multiple sets of radio inputs they all do have the same name Release[] but I do not know how to group the properly now if you will add 4 sets of those radio inputs you will be only able to select 1 from all of them
$('a#AddChampion').on('click', function () {
$('div#ChampionInput').append(
'<input type="radio" name="Release[]" value="New">New\
<input type="radio" name="Release[]" value="Rework">Rework\
<input type="radio" name="Release[]" value="None" checked>None\
');
});
Yes if you intend to use the same name only one output can be obtained. If you want to collect them separately you will have to use separate names.
E.g.
For two groups of ReleaseGrp1 and ReleaseGrp2
<input type="radio" name="ReleaseGrp1" value="New">New
<input type="radio" name="ReleaseGrp1" value="Rework">Rework
<input type="radio" name="ReleaseGrp1" value="None" checked>None
<input type="radio" name="ReleaseGrp2" value="New">New
<input type="radio" name="ReleaseGrp2" value="Rework">Rework
<input type="radio" name="ReleaseGrp2" value="None" checked>None

how to get only one radio button value in javascript

<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.
.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}
Give all the radio buttons in the group the same name.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>

Categories