How to remove disabled attribute from button if checked box is true?

How to remove disabled attribute from button if checked box is true? - javascript

I have a bunch of checkbox items. When I click the checkbox, I want the disabled attribute to be removed from the button, allowing the button to be clicked and a total displayed.
I've attached calcButton.removeAttribute('disabled'); to the conditional, but it's not removing the disabled attribute from the button.
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>

You're attaching the onclick on the disabled calcButton, and that doesn't work as it's disabled and can't enabled itself.
calcTotal is also called at the beginning, but there aren't options selected so the calcbutton won't be enabled also
See this example. If have added another button to show that removeAttribute is working well:
var calcButton = document.getElementById("calcButton");
if (document.getElementById("total")) {
calcTotal();
}
function calcTotal() {
var itemTotal = 0;
var items = document.getElementsByTagName("input");
for (var i = 0; i < 11; i++) {
if (items[i].checked) {
itemTotal += items[i].value * 1;
calcButton.removeAttribute('disabled');
}
document.getElementById("total").innerHTML = "Your order total is: $" + itemTotal + ".00";
}
}
var payOptions = document.getElementById('payOpts');
if (calcButton.addEventListener) {
calcButton.addEventListener("click", calcTotal, false);
} else if (calcButton.attachEvent) {
calcButton.attachEvent("onclick", calcTotal);
}
document.getElementById("realCalcButton").addEventListener("click", calcTotal, false);
calcButton.addEventListener('click', function() {
payOptions.style.display = 'block';
})
form {
display: flex;
flex-direction: column;
}
form label {
margin: 5px 0;
}
button {
width: fit-content;
}
<form>
<label for="item1" class="container">Hamburger ($5.00)
<input type="checkbox" id="item1" value="5">
<span class="checkmark"></span>
</label>
<label for="item2" class="container">Hotdog ($5.00)
<input type="checkbox" id="item2" value="5">
<span class="checkmark"></span>
</label>
<label for="item3" class="container">Jumbo Hotdog ($7.00)
<input type="checkbox" id="item3" value="7">
<span class="checkmark"></span>
</label>
<label for="item4" class="container">Corndog ($4.00)
<input type="checkbox" id="item4" value="4">
<span class="checkmark"></span>
</label>
<label for="item5" class="container">Chicken Fingers ($6.00)
<input type="checkbox" id="item5" value="5">
<span class="checkmark"></span>
</label>
<label for="item6" class="container">Nachos ($4.00)
<input type="checkbox" id="item6" value="4">
<span class="checkmark"></span>
</label>
<label for="item7" class="container">French Fries ($3.00)
<input type="checkbox" id="item7" value="3">
<span class="checkmark"></span>
</label>
<label for="item8" class="container">Soft Pretzel ($3.00)
<input type="checkbox" id="item8" value="3">
<span class="checkmark"></span>
</label>
<label for="item9" class="container">Small Drink ($2.00)
<input type="checkbox" id="item9" value="2">
<span class="checkmark"></span>
</label>
<label for="item10" class="container">Large Drink ($4.00)
<input type="checkbox" id="item10" value="4">
<span class="checkmark"></span>
</label>
<label for="item11" class="container">Bottled Water ($3.00)
<input type="checkbox" id="item11" value="3">
<span class="checkmark"></span>
</label>
<p id="total" class="priceInfo"></p>
<button type="button" id="realCalcButton">Calculate</button>
<button type="button" id="calcButton" disabled="disabled">Pay me this!</button>
<div class="pay-options" id="payOpts" style="display: none;">
<h4>Hello World</h4>
</div>
</form>

Related

How to auto check radio button basis of two radio button groups

<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem
Color
Gold
Rose Gold
Silver
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

Here is another solution I've tried which is not edit HTML.
My solution is going to find combination radio button that has proper data-color and data-stone
$("input[name^='product_']").on('change', (e) => {
$("input[name='combination']").prop('checked', false);
var productColor = $("input[name='product_color']:checked").val();
var productStone = $("input[name='product_stone']:checked").val();
if (productColor !== undefined && productStone !== undefined) {
if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
$(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

You need some jQuery to achieve this
<script>
$(document).ready(function() {
$('.product_description').click(function() {
var color = $('input[name="product_color"]:checked').val();
var stone = $('input[name="product_stone"]:checked').val();
var combinationClass = color + "-" + stone
if ($('.' + combinationClass).length) {
$('.' + combinationClass).attr('checked', true)
} else {
//If the class name of the combination is not found
alert("something went wrong");
}
});
});
</script>
HTML Code
<!--
# Added common class for all the stone and colour radio buttons to enable trigger
# Added Class based on the colour and stone value in the combination
# Added checked attribute to stone and colour radio buttons for on Load default selection
-->
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="gold" checked>Gold
<span></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="rose-gold">Rose Gold
<span data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="silver"> Silver
<span data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="malachite" checked>malachite
</label>
<label class="stone_label active">
<input type="radio" class="product_description" name="product_stone" value="tiger-eye"> tiger-eye
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="black"> black
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="blue"> blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap gold-malachite" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap gold-toger-eye" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap rose-gold-black" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap silver-blue" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>

Counting radio buttons values function error

I have the following radio buttons values to be counted using JS function and gives score in the bottom, but I get the following error "Uncaught TypeError: radioElems.forEach is not a function at HTMLDocument.":
<div class="data">
<label>Assis<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>
//Javascript
document.addEventListener( 'DOMContentLoaded', event => {
const text = document.getElementById('resultScore')
const radioElems = document.getElementsByClassName('radio')
radioElems.forEach((radioElem) => { radioElem.addEventListener('change', () => {
count()
}) })
const count = () => {
let score = 0
document.getElementsByClassName('["radio"]:checked').forEach(radioChecked => {
score += parseInt(radioChecked.value, 10)
text.innerHTML = score
})
}
})
<div class="data">
<label>Assis en train de lire<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train de regarder la télévision<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>

I changed the getElementsByClassName to querySelectorAll. querySelectorAll has the function forEach:
//Javascript
var text;
const count = () => {
let score = 0
document.querySelectorAll('input[class = "radio"]:checked').forEach(radioChecked => {
score += parseInt(radioChecked.value, 10);
});
text.innerHTML = score;
};
document.addEventListener('DOMContentLoaded', event => {
text = document.getElementById('resultScore');
const radioElems = document.querySelectorAll('input[class = "radio"]');
radioElems.forEach((radioElem) => {
radioElem.addEventListener('change', () => {
count();
})
})
});
<div class="data">
<label>Assis en train de lire<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="Assis" value="0" required> 0</span>
<span><input type="radio" class="radio" name="Assis" value="1" required> 1</span>
<span><input type="radio" class="radio" name="Assis" value="2" required> 2</span>
<span><input type="radio" class="radio" name="Assis" value="3" required> 3</span>
</div>
<div class="data">
<label>En train de regarder la télévision<span class="red_star">*</span></label>
<span><input type="radio" class="radio" name="En_train" value="0" required> 0</span>
<span><input type="radio" class="radio" name="En_train" value="1" required> 1</span>
<span><input type="radio" class="radio" name="En_train" value="2" required> 2</span>
<span><input type="radio" class="radio" name="En_train" value="3" required> 3</span>
</div>
<div class="score"><span>Score: </span><span id="resultScore">0</span></div>

Retain Multiple Radio Buttons checked after page refresh

In a form there are 2 group of radio buttons.
In the first group named Result, there are 4 option: id="ok", id="fa", id="fp", id="bp".
In the second group named ResultCategories, there are 9 option: id="cat1" .... id="cat9".
What I want:
a. If ok is clicked, ResultCategories will be unchecked (if already checked).
b. If fp or bp is clicked, cat9 of ResultCategories will be checked.
c. If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.
d. When radio buttons are clicked page will refresh and checked radio buttons remain checked.
I got a to c working but d is not working. It retains checked radio for only one group.
Here is what tried:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;">
<button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button>
</div>
<br />
<br />
<br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input type="radio" name="Result" id ="ok" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm
<input type="radio" name="Result" id="fa" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass
<input type="radio" name="Result" id="fp" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass
<input type="radio" name="Result" id="bp" value="4" />
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories">
<label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1
<input type="radio" name="ResultCategories" id="cat1" value="1" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2
<input type="radio" name="ResultCategories" id="cat2" value="2" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3
<input type="radio" name="ResultCategories" id="cat3" value="3" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4
<input type="radio" name="ResultCategories" id="cat4" value="4" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5
<input type="radio" name="ResultCategories" id="cat5" value="5" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 6
<input type="radio" name="ResultCategories" id="cat6" value="6" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7
<input type="radio" name="ResultCategories" id="cat7" value="7" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 8
<input type="radio" name="ResultCategories" id="cat8" value="8" />
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9
<input type="radio" name="ResultCategories" id="cat9" value="9" />
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script> $('input:radio').click(function() {
location.reload(); }); </script>
I have added a fiddle here: Fiddle
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
if(localStorage.selected) {
$('#' + localStorage.selected ).attr('checked', true);
}
$('.radio').click(function(){
localStorage.setItem("selected", this.id);
});
});
How can I retain both group of radio buttons checked?
Updated Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});$(document).ready(function() {
var result_dom = $('input[name="Result"]');
var categories_dom = $('input[name="ResultCategories"]');
var cat9 = $('#cat9');
var fa = $('#fa')
result_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val == 1) {
categories_dom.prop('checked', false);
} else if (checked_val == 3 || checked_val == 4) {
cat9.prop('checked', true);
}
});
categories_dom.on('change', function() {
var checked_val = $(this).val();
if (checked_val >= 1 && checked_val <= 8) {
fa.prop('checked', true);
}
});
});
$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});
</script>
</head>
<body>
<div class="container">
<form action="" method="POST">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Quality Check</legend>
<div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
<br /> <br /> <br />
<div class="row">
<div class="column">
<div id="Result">
<label>Result:</label>
<label class="radioContainer">Ok
<input class="radio" type="radio" name="Result" id ="ok" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Fasle Alarm <input class="radio" type="radio" name="Result" id="fa" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">False Pass <input class="radio" type="radio" name="Result" id="fp" value="3" >
<span class="circle"></span>
</label>
<label class="radioContainer">Blatant Pass <input class="radio" type="radio" name="Result" id="bp" value="4">
<span class="circle"></span>
</label>
</div>
</div>
<br />
<div class="column">
<div id="ResultCategories"><label>Result Categories:</label>
<div>
<label class="radioContainer">Cat 1 <input class="radio" type="radio" name="ResultCategories" id="cat1" value="1">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 2 <input class="radio" type="radio" name="ResultCategories" id="cat2" value="2">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 3 <input class="radio" type="radio" name="ResultCategories" id="cat3" value="3">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 4 <input class="radio" type="radio" name="ResultCategories" id="cat4" value="4">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 5 <input class="radio" type="radio" name="ResultCategories" id="cat5" value="5">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 6 <input class="radio" type="radio" name="ResultCategories" id="cat6" value="6">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 7 <input class="radio" type="radio" name="ResultCategories" id="cat7" value="7">
<span class="circle"></span>
</label> <label class="radioContainer">Cat 8 <input class="radio" type="radio" name="ResultCategories" id="cat8" value="8">
<span class="circle"></span>
</label>
<label class="radioContainer">Cat 9 <input class="radio" type="radio" name="ResultCategories" id="cat9" value="9">
<span class="circle"></span>
</label>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</body>
<script>
$('input:radio').click(function() {
location.reload();
});
</script>

$(document).ready(function(){
//get the selected radios from storage, or create a new empty object
var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
//loop over the ids we previously selected and select them again
Object.values(radioGroups).forEach(function(radioId){
document.getElementById(radioId).checked = true;
});
//handle the click of each radio
$('.radio').on('click', function(){
//set the id in the object based on the radio group name
//the name lets us segregate the values and easily replace
//previously selected radios in the same group
radioGroups[this.name] = this.id;
//finally store the updated object in storage for later use
localStorage.setItem("selected", JSON.stringify(radioGroups));
});
});

How to add text in input depending on a checkbox?

Wrote this code
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
alert(tag);
$("#workDesignTags").val(tag);
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>
How to do the value added, rather than replacing the old one? How to make the value removed from total value, if checkbox is unchecked? I have the layout just changes the values in input.

try:
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
val = $("#workDesignTags").val().trim() + tag;
$("#workDesignTags").val(val);
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>

$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
alert(tag);
$("#workDesignTags").val($.trim($("#workDesignTags").val() + tag));
} else {
input.parent().removeClass("selected");
}
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>
You could get the input value and add that with the new value and set it as input value
Another option could be like this
var value = "";
$("#workDesign label").on("click", function() {
var input = $(this).children("input");
var tag = $(this).text();
if (input.prop("checked")) {
input.parent().addClass("selected");
value += $.trim(tag)
$("#workDesignTags").val(value);
} else {
input.parent().removeClass("selected");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
<input type="text" name="tags" id="workDesignTags">
<label>
<input type="checkbox" name="design" value="Value 1">
<span class="textBox">Value 1
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 2">
<span class="textBox">Value 2
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 3">
<span class="textBox">Value 3
</span>
</label>
<label>
<input type="checkbox" name="design" value="Value 4">
<span class="textBox">Value 4
</span>
</label>
</div>

Javascript Form score update on submit

I have trouble figuring out what's happening here. This is a little quiz I have written using form with radio buttons. It's my first time playing around with forms and javascript. I don't understand why the score is always 1. The problem is that on submit, it only updates to whatever the +score for the 2nd answer is. When I remove 2nd +score the value remains 0, and when I change the +score for 2nd answer to 10, the score is 10. Would be really grateful for help.
Javascript code:
function validateRadio(obj, correct) {
var result = 0;
var i;
var l = obj.lenght;
for (i = 0; i < l; i++) {
if(obj[i].checked == true && obj[i].value == correct) {
result = 1;
}
}
if (!result && obj[i].value == correct) {
result = 1;
}
return result;
}
function validateSubmit(obj) {
//configuration
var score = 0;
//cache DOM
var scoreMsg = document.getElementById('scoreMsg');
//Score update on correct asnwer
if (validateRadio(obj.radAns1, 2)) {
score += 1;
}
if (validateRadio(obj.radAns2, 1)) {
score += 1;
}
if (validateRadio(obj.radAns3, 3)) {
score += 1;
}
if (validateRadio(obj.radAns4, 5)) {
score += 1;
}
if (validateRadio(obj.radAns5, 4)) {
score += 1;
}
scoreMsg.innerHTML = score;
}
HTML code;
<form onsubmit="validateSubmit(this);return false;" action='#'>
<div id="pytanie 1" class="pytania">
<span class="pytanie-numer">Pytanie 1</span> <br><br>
<span class="pytanie">Do ktorej klasy chodzi lama?</span>
<input type="radio" name="radAns1" value="1" checked>Liceum
<input type="radio" name="radAns1" value="2">Gimbazjum
<input type="radio" name="radAns1" value="3">Podstawowka
<input type="radio" name="radAns1" value="4">Zawodowka
<input type="radio" name="radAns1" value="5">Technikum
</div><br><br>
<div id="pytanie 2" class="pytania">
<span class="pytanie-numer">Pytanie 2</span> <br><br>
<span class="pytanie">Jakiego radia slucha lama?</span>
<input type="radio" name="radAns2" value="1" checked>Radio Maryja
<input type="radio" name="radAns2" value="2">Radio Gold
<input type="radio" name="radAns2" value="3">Radio Kaszebe
<input type="radio" name="radAns2" value="4">Eska-Tv
<input type="radio" name="radAns2" value="5">Radio Z/Radio RMF-FM
</div><br><br>
<div id="pytanie 3" class="pytania">
<span class="pytanie-numer">Pytanie 3</span> <br><br>
<span class="pytanie">Z czego sklada sie dieta lamy?</span>
<input type="radio" name="radAns3" value="1" checked>Z marchwi
<input type="radio" name="radAns3" value="2">Z jablka
<input type="radio" name="radAns3" value="3">Z galazek
<input type="radio" name="radAns3" value="4">Z grzybow
<input type="radio" name="radAns3" value="5">Z siana
</div><br><br>
<div id="pytanie 4" class="pytania">
<span class="pytanie-numer">Pytanie 4</span> <br><br>
<span class="pytanie">Okresl skilla w CS'a lamy.</span>
<input type="radio" name="radAns4" value="1" checked>Noob
<input type="radio" name="radAns4" value="2">Silver
<input type="radio" name="radAns4" value="3">Lama
<input type="radio" name="radAns4" value="4">Ciota
<input type="radio" name="radAns4" value="5">Wszystkie odpowiedzi
</div><br><br>
<div id="pytanie 5" class="pytania">
<span class="pytanie-numer">Pytanie 5</span> <br><br>
<span class="pytanie">Czy lama jedzie autem/rowerem?</span>
<input type="radio" name="radAns5" value="1" checked>Nie bo, nie umie jezdzic
<input type="radio" name="radAns5" value="2">Nie, bo jest za glupi
<input type="radio" name="radAns5" value="3">Nie bo, ma kopyta
<input type="radio" name="radAns5" value="4">Nie bo, zostal skocony
<input type="radio" name="radAns5" value="5">Nie bo, jest debilem i wszyskie odpowiedzi powyzej
</div><br><br>
<input type="submit" value="Wyslij odpowiedzi">
</form>

Perhaps the Javascript code in the 'validateRadio' function can be easier:
// The html
<form onsubmit="validateSubmit(this);return false;" action='#'>
<div id="pytanie 1" class="pytania">
<span class="pytanie-numer">Pytanie 1</span> <br><br>
<span class="pytanie">Do ktorej klasy chodzi lama?</span>
<input type="radio" name="radAns1" value="1" checked>Liceum
<input type="radio" name="radAns1" value="2">Gimbazjum
<input type="radio" name="radAns1" value="3">Podstawowka
<input type="radio" name="radAns1" value="4">Zawodowka
<input type="radio" name="radAns1" value="5">Technikum
</div><br><br>
<div id="pytanie 2" class="pytania">
<span class="pytanie-numer">Pytanie 2</span> <br><br>
<span class="pytanie">Jakiego radia slucha lama?</span>
<input type="radio" name="radAns2" value="1" checked>Radio Maryja
<input type="radio" name="radAns2" value="2">Radio Gold
<input type="radio" name="radAns2" value="3">Radio Kaszebe
<input type="radio" name="radAns2" value="4">Eska-Tv
<input type="radio" name="radAns2" value="5">Radio Z/Radio RMF-FM
</div><br><br>
<div id="pytanie 3" class="pytania">
<span class="pytanie-numer">Pytanie 3</span> <br><br>
<span class="pytanie">Z czego sklada sie dieta lamy?</span>
<input type="radio" name="radAns3" value="1" checked>Z marchwi
<input type="radio" name="radAns3" value="2">Z jablka
<input type="radio" name="radAns3" value="3">Z galazek
<input type="radio" name="radAns3" value="4">Z grzybow
<input type="radio" name="radAns3" value="5">Z siana
</div><br><br>
<div id="pytanie 4" class="pytania">
<span class="pytanie-numer">Pytanie 4</span> <br><br>
<span class="pytanie">Okresl skilla w CS'a lamy.</span>
<input type="radio" name="radAns4" value="1" checked>Noob
<input type="radio" name="radAns4" value="2">Silver
<input type="radio" name="radAns4" value="3">Lama
<input type="radio" name="radAns4" value="4">Ciota
<input type="radio" name="radAns4" value="5">Wszystkie odpowiedzi
</div><br><br>
<div id="pytanie 5" class="pytania">
<span class="pytanie-numer">Pytanie 5</span> <br><br>
<span class="pytanie">Czy lama jedzie autem/rowerem?</span>
<input type="radio" name="radAns5" value="1" checked>Nie bo, nie umie jezdzic
<input type="radio" name="radAns5" value="2">Nie, bo jest za glupi
<input type="radio" name="radAns5" value="3">Nie bo, ma kopyta
<input type="radio" name="radAns5" value="4">Nie bo, zostal skocony
<input type="radio" name="radAns5" value="5">Nie bo, jest debilem i wszyskie odpowiedzi powyzej
</div><br><br>
<input type="submit" value="Wyslij odpowiedzi">
</form>
<div id="scoreMsg"></div>
// The Javascript
function validateRadio(obj, correct) {
return obj.value == correct;
}
function validateSubmit(obj) {
var score = 0;
var scoreMsg = document.getElementById('scoreMsg');
if (validateRadio(obj.radAns1, 2)) {
score += 1;
}
if (validateRadio(obj.radAns2, 1)) {
score += 1;
}
if (validateRadio(obj.radAns3, 3)) {
score += 1;
}
if (validateRadio(obj.radAns4, 5)) {
score += 1;
}
if (validateRadio(obj.radAns5, 4)) {
score += 1;
}
scoreMsg.innerHTML = score;
}

Develop Reference

JavaScript is the programming language of the Web.

How to remove disabled attribute from button if checked box is true? - javascript

Related

How to auto check radio button basis of two radio button groups

Counting radio buttons values function error

Retain Multiple Radio Buttons checked after page refresh

How to add text in input depending on a checkbox?

Javascript Form score update on submit

Categories

Resources