getElementById with Radio Button not working - javascript

How to get radio button value in javascript using onChange?
Here's my HTML:
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="(checkGender)" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>

You need to define an actual function for call back:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}
<div class="radio">
<label>
<input type="radio" name="gender" onChange="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onChange="checkGender()" id="female" value="Female">
Female
</label>
</div>
<td>Gender</td>
<td><span id="gender2"></span></td>

Your JavaScript is executed once, when the page loads. You need to call it when something changes (based on an event), and react to the change.
HTML:
<div class="radio">
<label>
<input type="radio" name="gender" onclick="checkGender()" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" onclick="checkGender()" id="female" value="Female">
Female
</label>
</div>
JS:
function checkGender() {
if (document.getElementById('male').checked) {
document.getElementById('gender2').innerHTML = "Male";
}
if (document.getElementById('female').checked) {
document.getElementById('gender2').innerHTML = "Femmale";
}
}

Add an event handler to the container (.radio) using Element.addEventListener(). When the handler is triggered check if the event target is a radio button using Element.matches(). If is is and radio button update the value of the #gender1 div:
var radio = document.querySelector('.radio');
var gender2 = document.getElementById('gender2');
radio.addEventListener('change', function(e) {
if(!e.target.matches('input[type=radio]')) return;
gender2.innerText = e.target.value;
});
<div class="radio">
<label>
<input type="radio" name="gender" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
<div id="gender2"></div>

You can add an event listener on radio buttons and check for the values.
var radios = document.querySelectorAll('input[type=radio]');
var genderEl = document.getElementById("gender");
for(var i=0; i< radios.length; i++)
{
radios[i].addEventListener("click", function(){
genderEl.innerHTML = this.value
})
}
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="Male">
Male
</label>
<label>
<input type="radio" name="gender" id="female" value="Female">
Female
</label>
<h3 id="gender"></h3>
</div>
Note: You should always use eventlisteners rather than using inline event handlers. Inline event handlers are evaluated as eval. Moreover, it's a bad practice

Related

Radio button calculator with nested if Stateme

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>
When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

How to get the ID value while the radio button is checked in Shopify?

I have a radio button group and one input field. What I want is when the radio button property is CHECKED the below ID gets their value. I tried something which is wrong.
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="text" id="{%if radio.checked='checked'%} Account {%endif%}" class="">
I think you need input box value as selected radio button value. if you change the id of input control then HTML page will have 2 controls with same id. If you want input control value to show selected radio value then use below code.
<script language="javascript">
function onCheck(isChecked, value){
document.getElementById('displaySelRad').value = value
}
</script>
<input type="radio" id="male" name="gender" value="male" checked onclick="onCheck(this.checked, this.value)">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female" onclick="onCheck(this.checked, this.value)">
<label for="female">Female</label><br>
<input type="text" id="displaySelRad" class="">

Using javascript to check a radio button by it's value

There is 3 radio buttons on a website, and I want to use javascript to check the radio button that says "female". How would I do that?
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
document.getElementsByValue("female").checked = true;
With document.querySelector("input[value='female']" you can select it with the value.
document.querySelector("input[value='female']").click()
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
You can get value by binding this to function and accessing the boolean value with .checked and .name which value is checked
function radionButtonChecked(e) {
console.log(e.checked, " ",e.value);
}
<input type="radio" name="gender" value="male" onclick="radionButtonChecked(this)"> Male<br>
<input type="radio" name="gender" value="female" onclick="radionButtonChecked(this)"> Female<br>
<input type="radio" name="gender" value="other" onclick="radionButtonChecked(this)"> Other

How do I know which value is selected

I have this html:
<p class="form-row " id="radio_xsdfYxsfWEx_field">
<label>Radio</label>
<label for="radio_xsdfYxsfWEx_Male" class="radio">
<input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
<label for="radio_xsdfYxsfWEx_Female" class="radio">
<input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>
I need to know if the value selected is male or female. I could do by this but the like this but id is different
jQuery("#radio_xsdfYxsfWEx_field").on('change', function(){
var value = this.value;
if( value === 'Female' ) {
alert('succcess');
}
});
If I could get the value through name it would be simpler like:
jQuery("radio_xsdfYxsfWEx").on('change', function(){
var value = this.value;
if( value === 'Female' ) {
alert('succcess');
}
});
But, both failed, What is appropriate way? Thanks!
That should work , you need to use the value of the target , the example is close to your code
jQuery("#radio_xsdfYxsfWEx_field").on('change', function(e){
if( e.target.value === 'Female' ) {
alert('succcess');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
<label>Radio</label>
<label for="radio_xsdfYxsfWEx_Male" class="radio">
<input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
<label for="radio_xsdfYxsfWEx_Female" class="radio">
<input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>
You can get the cheked radio input value using this :
$("input[name='radio_xsdfYxsfWEx']:checked").val();
Just get the .val() (value) of the group during the change event.
$("input[name='radio_xsdfYxsfWEx']").on("change", function(){
let val = $(this).val(); // Get the value of the group
// Do what you want with the value
console.log(val);
if(val === "Female") {
alert("Success!");
} else {
alert("Failure");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
<label for="radio_xsdfYxsfWEx_Male" class="radio">
<input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
<label for="radio_xsdfYxsfWEx_Female" class="radio">
<input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>
Attribute selectors and :checked help:
[...document.querySelectorAll("input")].forEach(e => e.addEventListener("change", () =>
console.log(document.querySelector("[name=radio_xsdfYxsfWEx]:checked").value)
));
<p class="form-row " id="radio_xsdfYxsfWEx_field">
<label>Radio</label>
<label for="radio_xsdfYxsfWEx_Male" class="radio">
<input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
<label for="radio_xsdfYxsfWEx_Female" class="radio">
<input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>
(Furthermore, i believe that jQuery should never be used.)

radio button not shows updated value

I'm trying to update values from form except gender value all updates.
Gender value is not updating
here is code for gender radio button.
<label>
Gender: </label>
<input type="radio" id="gender" name="gender" value="male" required> Male
<input type="radio" name="gender" id="gender" value="female" required> Female
<input type="radio" name="gender" id="gender" value="other" required> Other
I'fetching value of form using js function which send it to update function.
var gender = $('#gender').val();
what mistake I had made?
This should work
// Get the value from a set of radio buttons
$('input:radio[name="gender"]:checked').val();
See also the examples given at http://api.jquery.com/val/
try this,
var gender = $('#gender:checked').val();
https://jsfiddle.net/dave17/tdk60unr/
i hope it will be helpful.
try this code working fine at my end
<form >
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

Categories

Resources