it needs to count the values but its doesnt work javascript

it needs to count the values but its doesnt work javascript - javascript

i have made a small code but he needs to count the value + a other value but its not work but he only places everything side by side. its a realy stupid question i know. I just do not see how it should be done.

You are trying to add two strings.
When you get value, notice your value is in quotes making it a string. You can parse int from string. You want to add something to handle when only 1 number is selected.
<!DOCTYPE html>
<html>
<body>
<form id="first" name="first">
<input type="radio" name="rads" value="1" />1
<input type="radio" name="rads" value="2" />2
<input type="radio" name="rads" value="3" />3
<input type="radio" name="rads" value="4" />4
</form>
<form id="second" name="second">
<input type="radio" name="rads" value="1" />1
<input type="radio" name="rads" value="2" />2
<input type="radio" name="rads" value="3" />3
<input type="radio" name="rads" value="4" />4
</form>
<span id="result"></span>
<script>
document.onclick = function hoi(){
var first = document.first.rads.value;
var second = document.second.rads.value;
var all = parseInt(first) + parseInt(second);
result.innerHTML = all;
}
</script>
</body>
</html>

The value property on a input is string, so there is string concatenation going on, convert both inputs to a number then add:
result.innerHTML = Number(first) + Number(second)

First of all, welcome to StackOverflow!
The solution to your problem is very simple: The value property returns a string, and using + on strings concatenates them. You first have to convert it to a number using parseInt(), and then add them together which would look like so:
var all = parseInt(first) + parseInt(second);

Related

how to retrieve the value of a radio button [duplicate]

I want to get the selected value from a group of radio buttons.
Here's my HTML:
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
Here's my js:
var rates = document.getElementById('rates').value;
var rate_value;
if(rates =='Fixed Rate'){
rate_value = document.getElementById('r1').value;
}else if(rates =='Variable Rate'){
rate_value = document.getElementById('r2').value;
}else if(rates =='Multi Rate'){
rate_value = document.getElementById('r3').value;
}
document.getElementById('results').innerHTML = rate_value;
I keep getting undefined.

This works in IE9 and above and all other browsers.
document.querySelector('input[name="rate"]:checked').value;

var rates = document.getElementById('rates').value;
The rates element is a div, so it won't have a value. This is probably where the undefined is coming from.
The checked property will tell you whether the element is selected:
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
Or
$("input[type='radio'][name='rate']:checked").val();

You can get the value by using the checked property.
var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
if(rates[i].checked){
rate_value = rates[i].value;
}
}

For you people living on the edge:
There is now something called a RadioNodeList and accessing it's value property will return the value of the currently checked input. This will remove the necessity of first filtering out the 'checked' input as we see in many of the posted answers.
Example Form
<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>
To retrieve the checked value, you could do something like this:
var form = document.getElementById("test");
alert(form.elements["test"].value);
The JSFiddle to prove it: http://jsfiddle.net/vjop5xtq/
Please note this was implemented in Firefox 33 (All other major browser seems to support it). Older browsers will require a polfyill for RadioNodeList for this to properly function

If you are using javascript without jQuery, you can use this command :
document.querySelector("input[type='radio'][name=rate]:checked").value;

The one worked for me is given below from api.jquery.com.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2

Another (apparently older) option is to use the format:
"document.nameOfTheForm.nameOfTheInput.value;"
e.g. document.mainForm.rads.value;
document.mainForm.onclick = function(){
var radVal = document.mainForm.rads.value;
result.innerHTML = 'You selected: '+radVal;
}
<form id="mainForm" name="mainForm">
<input type="radio" name="rads" value="1" />
<input type="radio" name="rads" value="2" />
<input type="radio" name="rads" value="3" />
<input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>
You can refer to the element by its name within a form. Your original HTML does not contain a form element though.
Fiddle here (works in Chrome and Firefox):
https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

Use document.querySelector('input[type = radio]:checked').value; to get value of selected checkbox , you can use other attributes to get value like name = gender etc. please go through below snippet definitely it will helpful to you,
Solution
document.mainForm.onclick = function(){
var gender = document.querySelector('input[name = gender]:checked').value;
result.innerHTML = 'You Gender: '+gender;
}
<form id="mainForm" name="mainForm">
<input type="radio" name="gender" value="Male" checked/>Male
<input type="radio" name="gender" value="Female" />Female
<input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>
Thank-You

HTML CODE:
<input type="radio" name="rdoName" value="YES"/>
<input type="radio" name="rdoName" value="NO"/>
JQUERY CODE:
var value= $("input:radio[name=rdoName]:checked").val();
$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>
You will get
value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"

Shortest
[...rates.children].find(c=>c.checked).value
let v= [...rates.children].find(c=>c.checked).value
console.log(v);
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>

In Javascript we can get the values by using Id's "getElementById()" in the above code you posted has contain name not Id
so you to modify like this
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
use this rate_value according to your code

A year or so has passed since the question was asked, but I thought a substantial improvement of the answers was possible. I find this the easiest and most versatile script, because it checks whether a button has been checked, and if so, what its value is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check radio checked and its value</title>
</head>
<body>
<form name="theFormName">
<input type="radio" name="theRadioGroupName" value="10">
<input type="radio" name="theRadioGroupName" value="20">
<input type="radio" name="theRadioGroupName" value="30">
<input type="radio" name="theRadioGroupName" value="40">
<input type="button" value="Check" onclick="getRadioValue('theRadioGroupName')">
</form>
<script>
function getRadioValue(groupName) {
var radios = theFormName.elements[groupName];
window.rdValue; // declares the global variable 'rdValue'
for (var i=0; i<radios.length; i++) {
var someRadio = radios[i];
if (someRadio.checked) {
rdValue = someRadio.value;
break;
}
else rdValue = 'noRadioChecked';
}
if (rdValue == '10') {
alert('10'); // or: console.log('10')
}
else if (rdValue == 'noRadioChecked') {
alert('no radio checked');
}
}
</script>
</body>
</html>
You can also call the function within another function, like this:
function doSomething() {
getRadioValue('theRadioGroupName');
if (rdValue == '10') {
// do something
}
else if (rdValue == 'noRadioChecked') {
// do something else
}
}

Assuming your form element is referred to by myForm variable below, and that your radio buttons share the name "my-radio-button-group-name", the following is pure JavaScript and standards compliant (although I have not checked it to be available everywhere):
myForm.elements.namedItem("my-radio-button-group-name").value
The above will yield the value of a checked (or selected, as it is also called) radio button element, if any, or null otherwise. The crux of the solution is the namedItem function which works with radio buttons specifically.
See HTMLFormElement.elements, HTMLFormControlsCollection.namedItem and especially RadioNodeList.value, as namedItem usually returns a RadioNodeList object.
(I use MDN because it allows one to track standards compliance, at least to a large degree, and because it is easier to comprehend than many WhatWG and W3C publications)

directly calling a radio button many times gives you the value of the FIRST button, not the CHECKED button. instead of looping thru radio buttons to see which one is checked, i prefer to call an onclick javascript function that sets a variable that can later be retrieved at will.
<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >
which calls:
var currentValue = 0;
function handleClick(myRadio) {
currentValue = myRadio.value;
document.getElementById("buttonSubmit").disabled = false;
}
additional advantage being that i can treat data and/or react to the checking of a button (in this case, enabling SUBMIT button).

You can also loop through the buttons with a forEach-loop on the elements
var elements = document.getElementsByName('radioButton');
var checkedButton;
console.log(elements);
elements.forEach(e => {
if (e.checked) {
//if radio button is checked, set sort style
checkedButton = e.value;
}
});

An improvement to the previous suggested functions:
function getRadioValue(groupName) {
var _result;
try {
var o_radio_group = document.getElementsByName(groupName);
for (var a = 0; a < o_radio_group.length; a++) {
if (o_radio_group[a].checked) {
_result = o_radio_group[a].value;
break;
}
}
} catch (e) { }
return _result;
}

My take on this problem with pure javascript is to find the checked node, find its value and pop it out from the array.
var Anodes = document.getElementsByName('A'),
AValue = Array.from(Anodes)
.filter(node => node.checked)
.map(node => node.value)
.pop();
console.log(AValue);
Note that I'm using arrow functions.
See this fiddle for a working example.

You can use .find() to select checked element:
var radio = Array.from(document.querySelectorAll('#rate input'))
var value = radio.length && radio.find(r => r.checked).value

Here is a solution putting the radio buttons in a constant and getting the selected value only when needed.
const rates = document.forms.rates.elements["rate"]
showRate()
function showRate(){
document.getElementById('results').innerHTML = rates.value
}
<form id="rates" onchange="showRate()">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</form>
<div id="results"></div>

If you are using jQuery:
$('input[name="rate"]:checked').val();

<form id="rates">
<input type="radio" name="rate" value="Fixed Rate"> Fixed
<input type="radio" name="rate" value="Variable Rate"> Variable
<input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>
then...
var rate_value = rates.rate.value;

check value by ID:
var CheckedValues = ($("#r1").is(':checked')) ? 1 : 0;

I used the jQuery.click function to get the desired output:
$('input[name=rate]').click(function(){
console.log('Hey you clicked this: ' + this.value);
if(this.value == 'Fixed Rate'){
rate_value = $('#r1').value;
} else if(this.value =='Variable Rate'){
rate_value = $('#r2').value;
} else if(this.value =='Multi Rate'){
rate_value = $('#r3').value;
}
$('#results').innerHTML = rate_value;
});
Hope it helps.

If the buttons are in a form
var myform = new FormData(getformbywhatever);
myform.get("rate");
QuerySelector above is a better solution. However, this method is easy to understand, especially if you don't have a clue about CSS. Plus, input fields are quite likely to be in a form anyway.
Didn't check, there are other similar solutions, sorry for the repetition

var rates = document.getElementById('rates').value;
cannot get values of a radio button like that instead use
rate_value = document.getElementById('r1').value;

If you are using the JQuery, please use the bellow snippet for group of radio buttons.
var radioBtValue= $('input[type=radio][name=radiobt]:checked').val();

Simply use: document.querySelector('input[rate][checked]').value

https://codepen.io/anon/pen/YQxbZJ
The HTML
<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate"
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>
<button id="rdio"> Check Radio </button>
<div id="check">
</div>
The JS
var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
y = document.getElementById("x1").value;
else if(document.getElementById("x2").checked)
y = document.getElementById("x2").value;
else if (document.getElementById("x3").checked)
y = document.getElementById("x3").value;
else
y = "kuch nhi;"
x.innerHTML = y;
}
var z = document.getElementById('rdio');
z.addEventListener("click", boom);`

var rates=document.getElementsByName("rate");
for (i = 0; i < rates.length; i++) {
if (rates[i].checked) {
console.log(rates[i].value);
rate=rates[i].value;
document.getElementById("rate").innerHTML = rate;
alert(rate);
}
}
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
</br>
<div id='rate'>
</div>

In php it's very easy
html page
Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">
Take value from form to php
$radio=$_POST['radio'];<br/>
use php if(isset($_POST['submit']))<br/>
{<br/>
echo "you selected".$radio."thank u";<br/>
}

Find elements by multiple names jQuery

I have these 4 checkboxes and I want to find them in jQuery by their names.
Is there any way to find all 4 checkboxes by their name?
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">
I am trying these below codes but I didn't get the result:
$("input[name^='Range Manual']").length
$("input[name^='Range,Manual']").length
$("input[name^='Range'][name^='Manual']").length

Yes you could use the ending by selector $= like :
$("input:checkbox[name$='FlexionRightSide']").length
Or using start with selctor ^= like :
$("input:checkbox[name^='Range'],input:checkbox[name^='Manual']").length
NOTE : You could give them a common class, and select them easely using class selector . like :
$('.common_class').length
console.log($("input:checkbox[name$='FlexionRightSide']").length); //4
console.log($("input:checkbox[name^='Range'],input:checkbox[name^='Manual']").length); //4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">

You can do that with *= which will check if name contains value passed.
Or you can do as your way with ^= as shown below.
In jQuery selectors
[name^='Range'] - Here ^= find element whose name starts with Range.
[name$='Range'] - Here $= find element whose name ends with Range.
[name*='Range'] - Here *= find element whose name contains Range.
Find more about jQuery Selector here.
console.log($("input[name^='Range'], input[name^='Manual']").length);
console.log($("input[name*='RightSide']").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">

I guess this is what you need:
$("input[name^='Range'],input[name^='Manual']").length

jQuery, collecting checkboxes and put selected ones to array, is that possible?

I want to collect checked checkboxes (values) with a classname and put them into an array. Just like that one:
var a = new Array();
$('.categoriesCb').each(function(i, item) {
if ($(item).prop('checked'))
{
a.push($(item).val());
}
alert(JSON.stringify(a));
});
my problem is its a bit big. Cant it be done with one-line?11

You can use .map() function along with .get(). You can also eliminate paramete item and use context this:
var a = $('.categoriesCb:checked').map(function(){
return $(this).val();
}).get();

Use jQuery.map()
$('.categoriesCb:checked').map(function() {
return this.value;
}).get();

another way is to use jQuery.makeArray() with .map():
var arr = jQuery.makeArray($(':checked').map(function(){ return this.value; }));
$('pre').html(JSON.stringify(arr));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="options" value="1" />
<input type="checkbox" name="options" value="2" />
<input type="checkbox" name="options" value="3" />
<input type="checkbox" checked name="options" value="4" />
<input type="checkbox" checked name="options" value="5" />
<br>
<pre></pre>

Just a pure JS single liner. Note that node list to array conversion with the spread operator works fine in Firefox but with Chrome it's only possible with v51 on. Otherwise you will have to go with the good old Array.prototype.map.call(document.querySelectorAll("input[type=checkbox][checked]"), e => e.value) method.
var arr = [...document.querySelectorAll("input[type=checkbox][checked]")].map(e => e.value);
console.log(JSON.stringify(arr));
<input type="checkbox" checked name="options" value="1" />
<input type="checkbox" name="options" value="2" />
<input type="checkbox" name="options" value="3" />
<input type="checkbox" checked name="options" value="4" />
<input type="checkbox" checked name="options" value="5" />

Find Selected Radio Button Value Based on Multiple Attribute Selection

I have 3 different Radio Buttons in a page with the following code
<input type="radio" name"1" value="1">1</input>
<input type="radio" name"2" value="2">2</input>
<input type="radio" name"3" value="3">3</input>
How can I get the value of the selected radio button with different names ?
I tried
var option = $("input[type='radio'][name='1']:checked").val();
But giving Undefined. Any Idea's ?

You need to have them be the same name, otherwise they don't work as radios (they could all be selected), and you need your html to be valid:
<input type="radio" name="1" value="1">1
<input type="radio" name="1" value="2">2
<input type="radio" name="1" value="3">3

You're missing the = when assigning the name attribute.
<input type="radio" name="1" value="1" />
<!-- ^
Also, as others have pointed out in comments, input tags are self-closing. (although it does work even with invalid html)
Demo: http://jsfiddle.net/g7RT2/

You missed "=" sign after the "name" attribute, selector doesn't match name=1 condition: <input type="radio" name"1" value="1">1</input>
http://jsfiddle.net/gLgBj/

here is a working fiddle
http://jsfiddle.net/mW7mk/
your html is not well formated, the input is self closed and name="1" not name"1"
var options = $("input[type='radio'][name='1']:checked").val();
alert("test : " + options);
worked just fine with :
<label><input type="radio" name="1" value="1" checked="checked"/>1</label>
<label><input type="radio" name="2" value="2"/>2</label>
<label><input type="radio" name="3" value="3"/>3</label>

Accessing the radio button value

Html Code: -
<input type="radio" name="radio" id="radio" value="1" onclick="validate()"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio" value="2" onclick="validate()"> For Users</input>
</p>
And JavaScript Code : -
function validate()
{
var btn_value=document.getElementById("radio").value;
if(btn_value==true)
{
alert(btn_value);
}
}
Now, whenever I am trying to print the value of radio button. It is always printing value as 1.
So, Now I don't understand what exactly am I missing here...
Thanx in advance for your help.

Elements ID should be unique. I modified your HTML and JS part and check below
Try this
HTML
<p>
<input type="radio" name="radio" id="radio1" value="1" onclick="validate(this)"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio2" value="2" onclick="validate(this)"> For Users</input>
</p>
JavaScrpit
function validate(obj)
{
var btn_value=obj.value;
if(btn_value==true)
{
alert(btn_value);
}
}

first of all never use a DOMID twice in your html!
remove them.... only use dublicated names!
<input type="radio" name="radio" value="1" onclick="validate()"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" value="2" onclick="validate()"> For Users</input>
</p>
with the js check every element with the name attribute!
function validate() {
var elements = document.getElementsByName("radio");
for(var n = 0; n < elements.length; n++) {
if(elements[n].checked === true) {
alert(elements[n].value);
}
}
}
if you use your validate method ONLY in the onclick you can pass the domelement in the validate methode like this:
<input type="radio" name="radio" value="1" onclick="validate(this)"> For Yourself</input> </p>
and your js:
function validate(domElement) {
if(domElement.checked === true) {
alert(elements[n].value);
}
}

try this
<input type="radio" name="radio" id="radio" value="1" onclick="validate(this)"> For Yourself</input> </p></br>
<p>
<input type="radio" name="radio" id="radio" value="2" onclick="validate(this)"> For Users</input>
</p>
function validate(ele)
{
alert(ele.value);
}

IDs MUST be unique, it's a mistake to give it the same id.
You can give the IDs a running number (- radio1,radio2 etc) and loop through them to check which one was selected.

Develop Reference

JavaScript is the programming language of the Web.

it needs to count the values but its doesnt work javascript - javascript

i have made a small code but he needs to count the value + a other value but its not work but he only places everything side by side. its a realy stupid question i know. I just do not see how it should be done.

The value property on a input is string, so there is string concatenation going on, convert both inputs to a number then add: result.innerHTML = Number(first) + Number(second)

Related

how to retrieve the value of a radio button [duplicate]

Find elements by multiple names jQuery

jQuery, collecting checkboxes and put selected ones to array, is that possible?

Find Selected Radio Button Value Based on Multiple Attribute Selection

Accessing the radio button value

Categories

Resources