Menu
Problem: I have not been able to get the value of a radiobutton or value in a textbox.
From trial and error, I found that the following gives me access to the information in div gender1
I could not figure out how to get the value of gender or age. I tried appending .value/.value(), using the id attribute, etc. I also tried various methods from a related question on stack overflow (Get Radio Button Value with Javascript), but had little success.
var checkedRadio = document.querySelectorAll('.w3-container')[0]
.querySelectorAll('#box')[0]
.querySelector('#gender1');
console.log( checkedRadio );<body>
<div class="w3-container">
<div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
<h5><b>Age (years):</b></h5>
<div id="age">
<input type="number" name="age1">
<br>
</div>
<div id="gender1">
<h5><b>Male or Female?</b>:
<input type="radio" id="r1" name="gender" value="Male"> Male
<input type="radio" id="r2" name="gender" value="Female"> Female
</h5>
</div>
</div>
</div>
</body>
269
you can use
document.querySelector('input[name="gender"]:checked').value
to get the value.
document.getElementById("btn_click").addEventListener("click", function(){
if(document.querySelector('input[name="age1"]').value !== "" && document.querySelector('input[name="gender"]:checked') !== null )
{
console.log("Age : ", document.querySelector('input[name="age1"]').value);
console.log("Gender : ", document.querySelector('input[name="gender"]:checked').value);
}
else
{
console.log("Please provide all the details.")
}
});<body>
<div class="w3-container">
<div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
<h5><b>Age (years):</b></h5>
<div id="age">
<input type="number" name="age1">
<br>
</div>
<div id="gender1">
<h5><b>Male or Female?</b>:
<input type="radio" id="r1" name="gender" value="Male" > Male
<input type="radio" id="r2" name="gender" value="Female"> Female
</h5>
</div>
<input type="button" id="btn_click" value="Click">
</div>
</div>
</body>You can use querySelector to select the textbox value or the value of the checked radio button like this:
var age = document.querySelector('input[type=number][name=age1]').value;
var gender = document.querySelector('input[type=radio]:checked').value;
See demo below:
function submit() {
var age = document.querySelector('input[type=number][name=age1]').value;
var gender = document.querySelector('input[type=radio]:checked').value;
console.log(age, gender);
}<div class="w3-container">
<div id="box" style="width:600px;height:650px;padding:10px;border:2px solid black;">
<h5><b>Age (years):</b></h5>
<div id="age">
<input type="number" name="age1">
<br>
</div>
<div id="gender1">
<h5><b>Male or Female?</b>:
<input type="radio" id="r1" name="gender" value="Male"> Male
<input type="radio" id="r2" name="gender" value="Female"> Female
</h5>
</div>
</div>
</div>
<button onclick="submit()">Click me</button>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
