This question already has answers here:
Find html label associated with a given input
(22 answers)
Closed 5 years ago.
I have the following HTML, how can I retrieve the ID of the input from the tag's name in JavaScript?
<div class="named-tags">
<label for="radio_01" class="radio" >
<input type="radio" name="Name[labeled_tags][]" value="01" id="radio_button_01">
Fblabel
<span class="control-indicator"> </span>
</label>
</div>
Using document.getElementsByName('Name[labeled_tags][]') will return an array of elements with the specified tag.
You're most likely wanting to select the very first element with the tag name, in this case you would use document.getElementsByName('Name[labeled_tags][]')[0]
let inputElem = document.getElementsByName('Name[labeled_tags][]')[0];
console.log(inputElem.outerHTML);
<div class="named-tags">
<label for="radio_01" class="radio">
<input type="radio" name="Name[labeled_tags][]" value="01" id="radio_button_01"> Fblabel
<span class="control-indicator"> </span>
</label>
</div>
Related
This question already has answers here:
How to get value of selected radio button?
(30 answers)
Closed 10 months ago.
I got my radio Selector that looks like this
<div id="graph_selector" style="display:none; text-align: center;" >
<p><b>Tipo de Grafico: </b></p>
<div class="cc-selector">
<input id="axes" type="radio" name="sel_graph" class="radio_selector" value="axes" />
<label class="drinkcard-cc axes"for="axes"></label>
<input id="activity" type="radio" name="sel_graph" class="radio_selector" value="activity" />
<label class="drinkcard-cc activity" for="activity"></label>
<input id="pie" type="radio" name="sel_graph" class="radio_selector" value="pie" />
<label class="drinkcard-cc pie" for="pie"></label>
</div>
</div>
A button to submit my selection
<button type="submit" class="btn btn-success" id="guardar_grafico">Graficar</button>
Im trying to get the right value on my js but when I use console.log(); all I get is the value from the 1st input= "axes" regardless of what I choose
<script type="text/javascript">
$('#guardar_grafico').click(function() {
var graph_selector = document.querySelector('input[name=sel_graph]').value
console.log(graph_selector);
});
Any help would be appreciated
In order to get the value of the selected radio in a radio group, you need to look for the checked property on each radio.
In this example, it loops through all of the radios with that name="sel_graph" attribute, and filters that list to the 1 radio that is checked.
var graph_selector = Array.from(
document.querySelectorAll('input[name=sel_graph]')
).filter(radio => radio.checked)[0]?.value;
console.log(graph_selector);
Also, I just realized you're using jQuery. There's a simpler solution with that, check this answer.
jQuery get value of selected radio button
nvm, solved the issue, I was missing the checked property on my js
it went from this
var graph_selector = document.querySelector('input[name=sel_graph]').value
to this
var graph_selector = document.querySelector('input[name=sel_graph]:checked').value
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 2 years ago.
Suppose I have the following HTML.
<div id="bookmarksList">
<label class="container">
<input type="radio" name="bookmark" id="b1"
onclick="onClicked(this);" checked="checked">
<span class="radioTitle">2014</span>
</label>
<label class="container">
<input type="radio" name="bookmark" id="b2"
onclick="onClicked(this);" checked="checked">
<span class="radioTitle">2015</span>
</label> //So on upto 10
</div>
in onClicked() function, I want to change the color of the checked checkbox's label to red.
I want to do this using jQuery's find() method, but it is giving undefined
$("#bookmarksList").find("input[type=radio]").each(() => {
console.log(this.id);
});
OR
$("#bookmarksList").find("label > input[type=radio]").each(() => {
console.log(this.id);
});
How should I do it?
Thank you.
Try it with a normal function, instead of an arrow function here, then it should work.
This worked for me:
$("#bookmarksList").find("input[type=radio]").each(function() {
console.log(this.id);
});
But anyway, I would suggest to also do a class for your inputs you want to fetch via jQuery, then you can just get it normal via $('yourClass').each(function() {....} or if you only want to get your elements w/ this class inside your #bookmarksList div:
$('#bookmarkslist .yourClass').each(function() {....}
Does it work right? I mean there no need JS.
function onClicked(id) {
console.log(id)
}
input:checked+label {
background-color: green
}
<div id="bookmarksList">
<input type="radio" name="bookmark" id="b1"
onclick="onClicked(this.id)" checked>
<label for "b1">
<span class="radioTitle">2014</span>
</label>
<input type="radio" name="bookmark" id="b2"
onclick="onClicked(this.id)">
<label for "b1">
<span class="radioTitle">2015</span>
</label>
</div>
You can get the ids of the inputs like this:
$(document).ready(function() {
$("#bookmarksList input[type=radio]").each(function() {
console.log(this.id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bookmarksList">
<label class="container">
<input type="radio" name="bookmark" id="b1" onclick="onClicked(this);" checked="checked">
<span class="radioTitle">2014</span>
</label>
<label class="container">
<input type="radio" name="bookmark" id="b2" onclick="onClicked(this);" checked="checked">
<span class="radioTitle">2015</span>
</label>
</div>
This question already has answers here:
How to get value of selected radio button?
(30 answers)
How to get the selected radio button value using js
(19 answers)
Closed 7 years ago.
I have a form on my webpage that looks like this:
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
</form>
How do I pull the value of the currently selected radio button (without a submit action) in Javascript?
What I'd like is something along the lines of the following:
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.SELECTEDBUTTON.value;
very close, you just need to use the name of the radio button group in place of "SELECTEDBUTTON", in this case "number":
document.getElementById('btn').addEventListener('click', function() {
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.number.value;
alert(numberInputValue);
});
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
<button id="btn">Click</button>
</form>
This question already has answers here:
How can I know which radio button is selected via jQuery?
(40 answers)
Closed 7 years ago.
I have two radio buttons with the same name but different values. I have to check before I submit my form that value selected id correct otherwise give message to user.
Here is my HTML code:
<td>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label><br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
</td>
Here is my JQuery that i tried to use:
var directed = $('input[name=directed]').each(function(){
alert($(this).val())
});
This code gave me all values for elements with the same name, I just need selected value. After that I have to check if that value is valid before submitting the form. If anyone know how to get just selected value please let me know. Thanks.
You can just use the :checked selector and val(): like this:
var directed = $('input[name=directed]:checked').val();
$('button').click(function() {
var directed = $('input[name=directed]:checked').val();
alert(directed);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label>
<br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
<br /><br />
<button>Get value</button>
I write following function to read inputs from my fieldset, it works but I have no idea how to read value of selected this way input
$$('#split_edit div label input').each(
function(item) {
console.log(item);
}
);
This is my html structure, I can't read input value using its ID because they are dynamically generated.
<fieldset id="split_edit">
<div class="top-10">
<label>
<span class="span-3 left">Item 1 (%)</span>
<input type="text" class="text" name="packet_1" value="0" id="packet_3">
</label>
</div>
<div class="top-10">
<label>
<span class="span-3 left">Item 1 (%)</span>
<input type="text" class="text" name="packet_2" value="0" id="packet_7">
</label>
</div>
</fieldset>
How to select value from input selected by each function in PrototypeJS?
I'm sorry for obvious question but I have started using PrototypeJS several hours ago.
Using item.value:
$$('#split_edit div label input').each(function(item) {
console.log(item.value);
});