How do I know which value is selected - javascript

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.)

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 execute the same code on each of the radio buttons with the same value

The code has 3 form groups used for Y/N questions with html radio buttons.
<div class="form-group">
<p>Q1</p>
<input type="radio" name="q1" value="y">Yes
<input type="radio" name="q1" value="n">No
</div>
<div class="form-group">
<p>Q2</p>
<input type="radio" name="q2" value="y">Yes
<input type="radio" name="q2" value="n">No
</div>
<div class="form-group">
<p>Q3</p>
<input type="radio" name="q3" value="y">Yes
<input type="radio" name="q3" value="n">No
</div>
// Jquery code:
<script>
var x = 0;
$('input[name="q1"]').change(function() {
if ($(this).val() == 'y') {
var x = 1;
}
});
if(x==1){
alert('res');
}
</script>
If possible, please ignore my var setting try and share the answer on how to execute the same result if any radio button with value="y" is checked.
This part of your code doesn't work because at the page load (doc ready) your x is 0. var x = 0
if(x==1){
alert('res');
}
Here is the example on how to run console.log if 'yes' is checked on every radio
$('input[type="radio"]').change(function() {
if ($(this).val() == 'y') {
console.log('yes');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<p>Q1</p>
<input type="radio" name="q1" value="y">Yes
<input type="radio" name="q1" value="n">No
</div>
<div class="form-group">
<p>Q1</p>
<input type="radio" name="q2" value="y">Yes
<input type="radio" name="q2" value="n">No
</div>
<div class="form-group">
<p>Q1</p>
<input type="radio" name="q3" value="y">Yes
<input type="radio" name="q3" value="n">No
</div>
$('input[type="radio"]').click(function() {
if ($(this).val() == 'y') {
console.log('yes');
}
});
$ ('input [type='radio']') select all the input radio and onClick if the value of the input equal 'y' then it is the right answer

getElementById with Radio Button not working

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

Naming html optionfields and checkboxes to use it properly in jquery

I'm trying to get a value in array and then display it. This works well for the one I have
html:<input id="email" type="email" name="email" required="required" />
jquery:
$('#email').on('keyup', updateStatus);
person[0] = $('#email').val();
but when I do this with optionfields or checkboxes, this doesn't work: I always get the value female in the optionfields and the value 1 in the checkboxes. How do I have to name them to get it working?
<input type="radio" id="gender" name="gender" value="Male">Male</input>
<input type="radio" id="gender" name="gender" value="Female">Female</input>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="1" />1</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="2" />2</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="3" />3</label>
<label>
<input type="checkbox" id="chbx1" name="sportart" value="4" />4</label>
And the jquery:
$('#gender').on('blur', updateStatus);
$('#chbx1').on('blur', updateStatus);
person[3] = $('#gender').val();
person[4] = $('#chbx1').val();
This is my updateStatus function:
function updateStatus() {
var person = [];
person[0] = $('#email').val();
person[1] = $('#passwort').val();
person[2] = $('#passwortwd').val();
person[3] = $('#gender').val();
person[4] = $('#chbx1').val();
person[5] = $('#hobby').val();
$('#status').text(JSON.stringify(person));
}
HTML ID should be unique. Several items cannot have the same ID.
Selection by ID (#...) will always return one item.
For example, check this snipper out:
document.write("By name:" + $("[name='gender']").length + "<br/>");
document.write("By ID:" + $("#gender").length + "<br/>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="gender" name="gender" value="Male"/>Male
<input type="radio" id="gender" name="gender" value="Female"/>Female
<br/><br/>
You should assign event to all elements with name sportart this way:
$("input[name='sportart']").on('change', function() {
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="sportart" value="1" />1<br/>
<input type="checkbox" name="sportart" value="2" />2<br/>
<input type="checkbox" name="sportart" value="3" />3<br/>
<input type="checkbox" name="sportart" value="4" />4
You can always get the selected radio or checkbox value using the :checked selector:
var arr = $("input[name='sportart']:checked"); // for checkbox it is array
alert(arr.length); // count of selected items
alert(arr[0].value); // value of the first one
$("input[name='gender']:checked").val();
Try using change handler and use name attribute selector:
$('input[name=gender], input[name=sportart]').on('change', updateStatus);
person[3] = $('input[name=gender]:checked').val();
person[4] = $('input[name=sportart]:checked').val();
Example:
var pushStatus = function() {
var o = {};
o.gender = $('input[name=gender]:checked').val();
o.sportart = $('input[name=sportart]:checked').map(function() {
return this.value;
}).get().join(',');
$('#status').html(JSON.stringify(o));
};
$(function() {
$('input[name=gender], input[name=sportart]').on('change', pushStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
<label>
<input type="checkbox" name="sportart" value="1" />1</label>
<label>
<input type="checkbox" name="sportart" value="2" />2</label>
<label>
<input type="checkbox" name="sportart" value="3" />3</label>
<label>
<input type="checkbox" name="sportart" value="4" />4</label>
<div id="status"></div>

jQuery (Mobile): get all checked items (checkboxes)

I got trouble finding a solution to this one.
I have an amount of checkboxes, and I want to get how many of them are checked.
Each time a box get checked/unchecked, the value needs to update.
What I have so far:
http://jsfiddle.net/drhmorw5/3/
My code so far:
function selected() {
var i = 0;
$("#names").each(function () {
if ($(this).prop("checked") === true) {
i++;
$("#checked").text("Sum Checked: " + i);
}
})
};
$("#checked").text("Sum Checked: ");
$(function(){
$('#names input[type=checkbox]').change(function(){
$("#checked").text($('#names input[type=checkbox]:checked').length);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="names">
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 1</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 2</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 3</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 4</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 5</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 6</label>
</div>
<br>
<br>
Sum Checked: <span id="checked">0</span>

Categories

Resources