We Keep Coding

How to sum the values of different field types in a form using Javascript

I can't seem to figure out how to sum the values of various field types in a form. I have some select fields like this:
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
And some radio buttons:
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
But how would I add the selections all up? I can find solutions for adding values of just inputs, or just radios, or just selects. But not all together.
I'd use jQuery if I have to.
[EDIT] I should have said, I'd like to output the total value to the user, perhaps inside a element.

Could clean this up a bit, but an example of using the FormData interface to add up all values in a form: https://developer.mozilla.org/en-US/docs/Web/API/FormData
function getValues() {
let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);
let total = 0;
for (var value of formData.values()) {
total += parseInt(value);
}
document.getElementById("total").innerHTML = total;
console.log(total);
}
<form id="myForm" name="myForm">
<div>
<label for="age">What is your age?</label>
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
</div>
<div>
<label for="riskSmoke">Do you smoke?</label>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
</div>
</form>
<button onclick="getValues()">Get Values</button>
<p>Total:</p>
<div id="total"></div>

You can use constructor FormData.
An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.
You could add a key/value pair to this using FormData.append:
formData.append('username', 'Chris');

I assume that you mean adding the values of the selected elements and that you use some trigger in this case I use a button. To make it work select options that have values
Please try this option
const button = document.querySelector("button");
button.addEventListener("click", () => {
const age = document.querySelector("select");
const riskSmoke = document.querySelector('input[name="riskSmoke"]:checked');
if (age && age.value && riskSmoke) {
const ageValue = +age.value;
const riskSmokeValue = +riskSmoke.value;
console.log(ageValue + riskSmokeValue);
}
});
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label><input type="radio" name="riskSmoke" value="2" /> Yes</label><br />
<label><input type="radio" name="riskSmoke" value="0" /> No</label>
<button>Click</button>

Without jQuery and for selecting specific values:
function getValues() {
var ageValue = Number(document.querySelector("select[name=age]").value);
console.log('age value: ' + ageValue);
var smokeValue = Number(document.querySelector('input[name="riskSmoke"]:checked').value);
console.log('smoke value: ' + smokeValue);
console.log('age + smoke: ' + (ageValue + smokeValue));
}
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<p>
<button onclick="getValues()">Get Values</button>

jQuery seems to be a bit of a overkill. In order to get the sum of the options and inputs, you may first get the value of the option in the select tag, and then add to the value of the selected radio input as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Title Here</title>
</head>
<body>
<select name="age" id="someId">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label><br>
<button onclick="CalculateValue()">Calculate</button>
<script>
let ageRangePicker = null, riskSmokeOptions = null;
function CalculateValue(){
ageRangePicker = document.getElementById("someId");
if(ageRangePicker.value !== ""){
let sum = Number(ageRangePicker.value);
riskSmokeOptions = document.getElementsByName("riskSmoke")
for(i = 0; i < riskSmokeOptions.length; i++) {
if(riskSmokeOptions[i].checked)
sum += Number(riskSmokeOptions[i].value);
}
alert("Your risk is: " + sum);
}
else{
alert("Select an age range");
}
}
</script>
</body>
</html>

I wrap in a form with an ID and sum on all input, making sure only to count checked radios and checkboxes
const sumValues = () => {
let val = 0;
$("#myForm :input").each(function() {
if (this.type === "radio" || this.type === "checkbox")
val += this.checked ? +this.value : 0;
else val += +this.value; // cast to number
})
$("#total").text(val)
};
$(function() {
$("#myForm").on("change", sumValues).change(); //when page loads
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="" selected>30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<br/>Total: <span id="total" />
</form>
Plain JS
const sumValues = () => {
let val = 0;
[...document.getElementById("myForm").querySelectorAll("input, select, textarea")].forEach(function(elem) {
if (elem.type === "radio" || elem.type === "checkbox")
val += elem.checked ? +elem.value : 0;
else val += +elem.value; // cast to number
})
document.getElementById("total").textContent = val;
};
window.addEventListener("load", function() {
document.querySelector("#myForm").addEventListener("change", sumValues)
sumValues()
})
<form id="myForm">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="" selected>30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" checked name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
<br/>Total: <span id="total" />
</form>

With jQuery, you can listen for the change event and use both the jQuery .serializeArray() and the array .reduce() method to get the total:
$('form').on('change', function() {
let totalScore = $(this).serializeArray().reduce((a, f) => a += +f.value, 0);
//output to a predefined element
$('#output').text( totalScore );
})
.change();
Here is how you may define an output element:
<div class="output">
<label>Total Score: </label>
<span id="output"></span>
</div>
Note that this will give a running total and there's no need to click any button or to trigger any event other then the actions needed to make choices on the various form elements.
$('form').on('change', function() {
let totalScore = $(this).serializeArray().reduce((a, f) => a += +f.value, 0);
//console.log( totalScore );
$('#output').text( totalScore );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<select name="age">
<option value="">- Select -</option>
<option value="1" class="">30-34</option>
<option value="2">35-39</option>
</select>
<p>Do you smoke?</p>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
<label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>
</form>
<div class="output">
<label>Total Score: </label>
<span id="output"></span>
</div>

Put a button below at the bottom of your HTML and make a function something like this:
const radioControls = document.querySelectorAll('.radio-btn');
const selectControl = document.querySelectorAll('.select');
let dataTransferObject = {
radioValue: 0,
selectValue: 0
};
let sum = 0;
function collectValues() {
for(let control of radioControls) {
if (control.checked) {
dto.radioValue = control.value
}
}
dto.selectValue = selectControl[0].value;
for(let attr of Object.values(dto)) {
sum += parseInt(attr);
}
}
Then your button simply calls this function, I would imagine this would all be contained in a form of some sort:
<button onclick="collectValues()">Submit</button>
Now the variable sum holds the accumulated value.

How to select/unselect select options with checkboxes with JavaScript / jQuery?

I have almost no knowledge of JavaScript or jQuery.
I need to select/unselect an option in a <select> where multiple options can be selected when a checkbox or button is clicked.
The checkbox needs to select/unselect the option with the same value.
My idea was something like this:
$(document).ready(function() {
var input = $('#entry-select');
var checkboxes = $('.entrycheckbox');
checkboxes.click(function() {
var element = $(this);
var value = element.val();
input.val(value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
This only selects the option with the value of the last clicked checkbox, not which ones are checked, and it unselects every other option.

You only give val() the value of the checkbox which was selected last. To make this work as you require you need to build an array of all selected checkboxes and provide that to val() instead.
To achieve this you can use filter() to get the selected checkboxes, then map() to build the array:
input.val(checkboxes.filter(':checked').map((i, el) => el.value));
$(document).ready(function() {
var $input = $('#entry-select');
var $checkboxes = $('.entrycheckbox');
$checkboxes.click(function() {
$input.val($checkboxes.filter(':checked').map((i, el) => el.value));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
You may also want to consider adding readonly to the select if you don't want the user to change the selected option directly.

<script type="text/javascript">
$(document).ready(function(){
$('.entrycheckbox').click(function(){
$(":entrycheckbox").each(function(){
if($(this).val()==1){
$(this).attr("checked","checked");
}
});
});
});
</script>

How to made a checkbox checked onclick on select an option from drop down: JS

I have 2 radio box inputs that I want to check when I select an option from a select dropdown menu.
I have a select box as like this:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
And radio boxes like:
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
How can I make the selected option equal the selected radio button?
For example, if the first option is selected, then the first radio box is checked, or vice-versa.

It is very simple on using jquery,
$('#shipping-method').on('change', function(){
var criteria = $(this).val(); // will give you selected option value
if(criteria === 'Your Value') // your condition here
{
$('#s_method_flatrate2_flatrate2').attr('checked',true); // checking the radio button
}
});
You can similarly add conditionals to choose your radio buttons

Simple solution based on positions of related elements:
$('#shipping-method').change(function(){
var optionSelected = $("option:selected", this);
$(".radio:eq("+ optionSelected.index() +")").prop("checked", true);
});
Try:
https://jsfiddle.net/nwk5fez9/

Remove checked="checked" from radio button and try.
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#shipping-method').change(function(){
var option= $('#shipping-method').val();
if(option == 'option1') {
$('#s_method_flatrate2_flatrate2').attr('checked',true);
}
if(option == 'option2') {
$('#s_method_flatrate_flatrate').attr('checked',true);
}
});
</script>

I really like San Krish's solution, but for the sake of completeness, here's my answer (in plain JS):
I'm simply going to check for the change event on the select box, then set the corresponding index of the radio buttons.
var select = document.getElementById("shipping-method"),
rbs = document.getElementsByName("shipping_method");
select.addEventListener("change", function () {
rbs[select.selectedIndex].checked = true;
});
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" checked="checked" id="s_method_flatrate2_flatrate2" value="flatrate2_flatrate2" name="shipping_method">
<input type="radio" class="radio" id="s_method_flatrate_flatrate" value="flatrate_flatrate" name="shipping_method">
Please note, that if you use this, the indices of the options and radio buttons must correspond; it would be wise to add other checks in the event listener.

You can set the checked property of the radio button using Jquery, like so:
JQUERY:
$('#shipping-method').change(function() {
if ($(this).val() === "option1") {
$('#flatrate').prop('checked', true);
} else if ($(this).val() === "option2") {
$('#flatrate2').prop('checked', true);
} else {
$('#flatrate2').prop('checked', false);
$('#flatrate').prop('checked', false);
}
});
NOTES:
Since JQuery 1.6, you should be using prop() and not attr().
I've also added a default "SELECT" option to your drop down (see
below), with logic to unset both radio buttons if that default is
selected. This is not required, but I added it in case it's useful for you.
HTML:
<div id="checkout-shipping-method-load">
<select id="shipping-method">
<option value="">SELECT</option>
<option value="option1">1 twister ($14.99 + $6.99 S&H)</option>
<option value="option2">1 twister ($14.99 + $6.99 S&H)</option>
</select>
</div>
<input type="radio" class="radio" id="flatrate2" value="flatrate2_flatrate2" name="shipping_method">Flat 2
<input type="radio" class="radio" id="flatrate" value="flatrate_flatrate" name="shipping_method">Flat 1
JSFiddle Demo here.

Change radio by Id attr to checked on select change

Trying to set the radio inputs attribute to checked on select change.
Select HTML
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option onclick="jsFunction()" value="slides_1">subject1</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
<option onclick="jsFunction()" value="slides_2">subject2</option>
</select>
jQuery
<script>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
var mySlide = myselect.options[myselect.selectedIndex].value;
document.getElementById.mySlide.prop('checked', 'checked');
}
</script>
Radio HTML
<input type="radio" name="slides" check="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
Thanks -Hector

For JS, see the function below.
For the HTML part, remove the onclick="jsFunction()" field on the options, and changed the last option to "slides_3".
See the working code at:
JSFiddle
JS:
function jsFunction() {
var selectedID = $('select#selectOpt').val();
$('input[type=radio]').filter('#'+selectedID).prop('checked', true);
}
HTML(updated):
<select onChange="jsFunction()" name="templateId" id="selectOpt" required="required">
<option value=""></option>
<option value="slides_1">subject1</option>
<option value="slides_2">subject2</option>
<option value="slides_3">subject3</option>
</select>
<div>
<input type="radio" name="slides" checked="checked" id="slides_1"/>
<input type="radio" name="slides" id="slides_2"/>
<input type="radio" name="slides" id="slides_3"/>
</div>

Import jquery:
<script type="text/javascript" src="you_jquery_file"></script>
You can download here: http://jquery.com/download/
Then change:
document.getElementById.mySlide.prop('checked', 'checked');
to:
$("#"+mySlide).prop('checked', 'checked');

For this particular problem, you don't need jQuery. Something like this will do:
function checkRadio(name, id) {
var rGroup = document.getElementsByName(name);
var theRadio = document.getElementById(id);
// uncheck the checked ones
for (var i=0;i<rGroup.length;i++) {
rGroup[i].checked = false;
}
// check the appropriate button
theRadio.checked = true;
}
// bind custom event to your select list
var mylist = document.getElementById('some_select_list');
mylist.addEventListener('change', function() {
var selected = this.options[this.selectedIndex].value;
checkRadio('radio_group_name', selected);
}, false);

javascript checkbox enable/disable

Ok this is very anoying, and it is probably very simple. I want to start my web page with disabled checkboxes, and after particlar line in listbox is selected to enable those boxes. So I put this in onload method
onload = function () {
for (i = 0; i < document.frmMain.checkgroup.length; i++){
document.frmMain.checkgroup[i].disabled = true ;
}
}
it start my page with disabled boxes, now i want do enable them
function enableCheckboxes(){
if (document.frmMain.Vrste[document.frmMain.Vrste.selectedIndex].value == "Sendvici i Rostilj"){
for(i=0;i<document.frmMain.checkgroup.length;i++){
document.frmMain.checkgroup[i].enabled = true;
}
}
}
it goes in to the for loop, but it never enable those checkboxes. I cannot figure it why.
and this is html part, where i call enablecheckbox function:
<select name="Vrste" onChange="PopulatePodvrste(); enableCheckboxes();" size="8">
<option value="Pica">Pica</option>
<option value="Barbarina domaca trpeza">Barbarina domaca trpeza</option>
<option value="Slana Palacinka">Slana Palacinka</option>
<option value="Slatka Palacinka">Slatka Palacinka</option>
<option value="Sendvici i Rostilj">Rostilj i sendvici</option>
<option value="Dobro jutro sa Barbarom">Dobro jutro sa Barbarom</option>
<option value="Chicken Meni">Chicken Meni</option>
<option value="Posebna Ponuda">Posebna Ponuda</option>
<option value="Salate">Salate</option>
</select>
And finally actual checkboxes:
<input type="checkbox" name="checkgroup" >Susam</input><br>
<input type="checkbox" name="checkgroup" >Cili</input><br>
<input type="checkbox" name="checkgroup" >Tartar</input><br>
<input type="checkbox" name="checkgroup" >Urnebes</input><br>
<input type="checkbox" name="checkgroup" >Krastavac</input>

Try instead:
document.frmMain.checkgroup[i].disabled = false ;

if would add the jquery library to your page then I would add:
$(document).ready(function() {
$("input[name='checkgroup']").attr("disabled", "disabled");
})
function enableCheckboxes() {
$("input[name='checkgroup']").removeAttr("disabled");
}
If you don't want to use jquery then just change your enable line to be:
document.frmMain.checkgroup[i].disabled = false ;