We Keep Coding

Loop multiple check boxes in javascript addition

I have a simple checkbox calculator, that pretty much adds the items that are checked. How can I seperate the totalPrice. My issue is that it doesn't display in the right place when food items are selected.
Is there a way to display the price in the right spot according to which items are ticked.. For example items from technology should display in the totalPrice for that fieldset, and items checked from foods should display in the totalPrice for that fieldset. I struggle to make the code as intuitive as possible, any help or tips will be appreciated.
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>

Ok, so first of all you've used an id twice, that causess some issues, also you'll need seperate functions for both forms.
Here's the new code:
function priceAddition() {
var input = document.getElementsByName("option");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}
function priceAddition2() {
var input = document.getElementsByName("option2");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2);
}
<form method="post" oninput="priceAddition();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Technology</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="2500"> 4K Television $2500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="250"> Speakers $250
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Laptop $500
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option" value="500"> Gaming Console $500
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for technology: </h3>
<p id="totalPrice">$0.00</p>
</div>
</fieldset>
</div>
</form>
<form method="post" oninput="priceAddition2();">
<div class="grid-container">
<fieldset id="fieldset">
<legend>Prices</legend>
<div class="items-container">
<h3>Food</h3>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="5"> Grapes $5
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="22"> Salmon Fish $22
</label>
</div>
<div class="item-option">
<label class="label">
<input type="checkbox" name="option2" value="30"> 12 Donuts $30
</label>
</div>
<div class="items-container">
<div class="price">
<br>
<h3>Total estimated price for food: </h3>
<p id="totalPrice2">$0.00</p>
</div>
</fieldset>
</div>
</form>

HTML forms - multiple choice form to plain text

I would like to create fillable form to html and save it to text file or just on site have a box making everything checked copyable as plain text.
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
So for example I filled the form like this
form filled example
So example output would be:
Chronic diesases none
Allergies none
Medical history
since 3 days diahrerra vomiting, temp 38,5 C
Skin rash on legs
Temperature 38,1
So I would liek to the unchecked values to be omitted and checked to be filled
How to do that? I want to make physical examination easier, I'm sick of always typing everythig

Here you go, you can go ahead and do something with the String now
const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);
$("#saveForm").addEventListener("click", function (evt) {
evt.preventDefault(); // don't submit the form
let output = [];
// set first field if radio checked
let inPresenceOf = Array.from($$("input[type='radio'][id^='element_1_']")).filter(element => element.checked);
if(inPresenceOf.length === 1) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
// set second field if value not empty
if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
// set third field if value not empty
if($("#element_3").value.trim()) output.push("Allergies: " + $("#element_3").value.trim());
// set fourth field if value not empty
if($("#element_4").value.trim()) output.push("Medical History: " + $("#element_3").value.trim());
// set fifth field if radio checked
let meningism = Array.from($$("input[type='radio'][id^='element_5_']")).filter(element => element.checked);
if(meningism.length === 1) output.push("Meningism " + $("label[for='"+meningism[0].id+"']").innerHTML);
// set sixth field if radio checked
let skin = Array.from($$("input[type='radio'][id^='element_7_']")).filter(element => element.checked);
if(skin.length === 1) {
if($("label[for='"+skin[0].id+"']").innerHTML === "Normal, without purpura")
output.push("Skin: Normal, without purpura");
else output.push("Skin: " + $("#element_7_2").value);
}
// set seventh field if value not empty
if($("#element_6").value.trim()) output.push("Temperature: " + $("#element_6").value.trim());
const outputString = output.join("\n");
console.log(outputString)
})
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>

Are you familiar with Javascript/jQuery?
You need to use some form of logic to determine whether the field is null or not, or whether the box is checked or not
<form>
<input type="checkbox" data-val="Has Hemorrhoids"/>Hemmorhoids<br/>
<input type="checkbox" data-val="Has Severe Anal Fissures"/>Anal Fissures<br/>
<button id="create_final_summary">Make Summary</button>
</form>
<script>
$('#create_final_summary').on('click', function(){
var allFields = $(this).parents('form').find('input');
console.log(allFields);
allFields.each(function(){
if($(this).prop('checked' == true)){
$("#final_summary").append($(this).attr('data-val'));
}
});
});

You can use JavaScript to extract the text data as an object and view the properties of that object (view it in the console):
var relatives = document.body.querySelectorAll("#relativesChoices .radio");
var chronicInput = document.body.querySelector("#element_2");
var allergyInput = document.body.querySelector("#element_3");
var historyInput = document.body.querySelector("#element_4");
var meninigsm = document.body.querySelectorAll("#meninigsm .radio");
var skin = document.body.querySelectorAll("#skin .radio");
var temp = document.body.querySelector("#element_6");
var finalResult = {
relatives:"",
chronic: "",
allergies: "",
medicalHistory: "",
meningism :"",
skin:"",
temparture:""
}
function displayResults(){
for (var choice of relatives){
if(choice.checked === true){
finalResult.relatives = choice.value;
}
}
for (var choice of meninigsm){
if(choice.checked === true){
finalResult.meningism = choice.value;
}
}
for (var choice of skin){
if(choice.checked === true){
finalResult.skin = choice.value;
}
}
finalResult.chronic = chronicInput.value;
finalResult.allergies = allergyInput.value;
finalResult.medicalHistory = historyInput.value;
finalResult.temparture = temp.value;
console.log(finalResult);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEDICAL HISTORY QUESTIONNAIRE</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Visit in the presence of </label>
<span id="relativesChoices">
<input value="parents" id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input value="mother" id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input value="father" id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input value="grandmother" id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input value="grandfather " id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input value="grandparents" id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_3" >
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_4" >
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li> <li id="li_5" >
<label class="description" for="element_5">Meningism </label>
<span id="meninigsm">
<input value="negative" id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input value="positive" id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li> <li id="li_7" >
<label class="description" for="element_7">Skin </label>
<span id="skin">
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="normal" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="abnormal" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li> <li id="li_6" >
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<button onclick="displayResults()">displayResults<button>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>

Javascript parseFloat and multiply

I have some checkboxes that when checked will updated the price total at the bottom and they work great. However, I also added a separate input field for entering a quantity. I am trying to get that quantity to multiply by the value of the input field. Right now I only have the code adding the text input field to the total instead of multiplying it by the field it is next to.
Here is my code:
function updateTotal() {
var HI1 = document.getElementById('HI1');
var HI2 = document.getElementById('HI2');
var HI3 = document.getElementById('HI3');
var HI4 = document.getElementById('HI4');
var HI5 = document.getElementById('HI5');
var HI6 = document.getElementById('HI6');
var HI7 = document.getElementById('HI7');
var HI8 = document.getElementById('HI8');
var HI9 = document.getElementById('HI9');
var HI9 = document.getElementById('HI9');
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
amount += parseInt(ip.value) || 0;
}
}
amount += HI1.checked ? parseFloat(HI1.getAttribute('data-price')) : 0;
amount += HI2.checked ? parseFloat(HI2.getAttribute('data-price')) : 0;
amount += HI3.checked ? parseFloat(HI3.getAttribute('data-price')) : 0;
amount += HI4.checked ? parseFloat(HI4.getAttribute('data-price')) : 0;
amount += HI5.checked ? parseFloat(HI5.getAttribute('data-price')) : 0;
amount += HI6.checked ? parseFloat(HI6.getAttribute('data-price')) : 0;
amount += HI7.checked ? parseFloat(HI7.getAttribute('data-price')) : 0;
amount += HI8.checked ? parseFloat(HI8.getAttribute('data-price')) : 0;
amount += HI9.checked ? parseFloat(HI9.getAttribute('data-price')) : 0;
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;
<ul id="input_9_34" class="gfield_checkbox">
<li class="gchoice_9_34_1">
<input id="HI1" type="checkbox" tabindex="22" value="10'x10'|950" data-price="950" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +$950.00">
10'x10' inline
<span class="ginput_price"> +$950.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q1" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_2">
<input id="HI2" type="checkbox" tabindex="23" value="10'x10'|975" data-price="975" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +$975.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +$975.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q2" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_3">
<input id="HI3" type="checkbox" tabindex="24" value="10'x10'|1000" data-price="1000" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +$1,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +$1,000.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q3" value="0" class="quantity">
</li>
<li class="gchoice_9_34_4">
<input id="HI4" type="checkbox" tabindex="25" value="10'x15'|1435" data-price="1435" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +$1,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +$1,435.00</span>
</label>
| Quantity:
<input type="text" name="Q4" id="Q4" value="0" class="quantity">
</li>
<li class="gchoice_9_34_5">
<input id="HI5" type="checkbox" tabindex="26" value="10'x20'|1900" data-price="1900" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +$1,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +$1,900.00</span>
</label>
| Quantity:
<input type="text" name="Q5" id="Q5" value="0" class="quantity">
</li>
<li class="gchoice_9_34_6">
<input id="HI6" type="checkbox" tabindex="27" value="10'x30'|2850" data-price="2850" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +$2,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +$2,850.00</span>
</label>
| Quantity:
<input type="text" name="Q6" id="Q6" value="0" class="quantity">
</li>
<li class="gchoice_9_34_7">
<input id="HI7" type="checkbox" tabindex="28" value="20'x20'|3800" data-price="3800" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +$3,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +$3,800.00</span>
</label>
| Quantity:
<input type="text" name="Q7" id="Q7" value="0" class="quantity">
</li>
<li class="gchoice_9_34_8">
<input id="HI8" type="checkbox" tabindex="29" value="20'x20'|4000" data-price="4000" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +$4,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +$4,000.00</span>
</label>
| Quantity:
<input type="text" name="Q8" id="Q8" value="0" class="quantity">
</li>
<li class="gchoice_9_34_9">
<input id="HI9" type="checkbox" tabindex="30" value="20'x30'|5650" data-price="5650" name="HI9" onChange="updateTotal();">
<label id="label_9_34_9" for="HT9" price=" +$5,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +$5,650.00</span>
</label>
| Quantity:
<input type="text" name="Q9" id="Q9" value="0" class="quantity">
</li>
</ul>
Total Price:
<input name="price" id="price" type="text" readonly="readonly" class="total">
Any thoughts on how to accomplish this?

Add a data-qty attribute to the checkboxes that contains the ID of the input field with the quantity. Then you can multiply the price by the quantity in the corresponding input.
function updateTotal() {
var checkboxes = document.querySelectorAll("input[type=checkbox]");
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < checkboxes.length; i++) {
var cb = checkboxes[i];
if (cb.checked) {
var input = document.getElementById(cb.getAttribute('data-qty'));
var qty = input.value;
if (qty != '') {
var price = cb.getAttribute('data-price');
amount += price * qty;
}
}
}
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;
<ul id="input_9_34" class="gfield_checkbox">
<li class="gchoice_9_34_1">
<input id="HI1" type="checkbox" tabindex="22" value="10'x10'|950" data-price="950" data-qty="Q1" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +$950.00">
10'x10' inline
<span class="ginput_price"> +$950.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q1" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_2">
<input id="HI2" type="checkbox" tabindex="23" value="10'x10'|975" data-price="975" data-qty="Q2" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +$975.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +$975.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q2" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_3">
<input id="HI3" type="checkbox" tabindex="24" value="10'x10'|1000" data-price="1000" data-qty="Q3" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +$1,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +$1,000.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q3" value="0" class="quantity">
</li>
<li class="gchoice_9_34_4">
<input id="HI4" type="checkbox" tabindex="25" value="10'x15'|1435" data-price="1435" data-qty="Q4" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +$1,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +$1,435.00</span>
</label>
| Quantity:
<input type="text" name="Q4" id="Q4" value="0" class="quantity">
</li>
<li class="gchoice_9_34_5">
<input id="HI5" type="checkbox" tabindex="26" value="10'x20'|1900" data-price="1900" data-qty="Q5" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +$1,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +$1,900.00</span>
</label>
| Quantity:
<input type="text" name="Q5" id="Q5" value="0" class="quantity">
</li>
<li class="gchoice_9_34_6">
<input id="HI6" type="checkbox" tabindex="27" value="10'x30'|2850" data-price="2850" data-qty="Q6" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +$2,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +$2,850.00</span>
</label>
| Quantity:
<input type="text" name="Q6" id="Q6" value="0" class="quantity">
</li>
<li class="gchoice_9_34_7">
<input id="HI7" type="checkbox" tabindex="28" value="20'x20'|3800" data-price="3800" data-qty="Q7" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +$3,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +$3,800.00</span>
</label>
| Quantity:
<input type="text" name="Q7" id="Q7" value="0" class="quantity">
</li>
<li class="gchoice_9_34_8">
<input id="HI8" type="checkbox" tabindex="29" value="20'x20'|4000" data-price="4000" data-qty="Q8" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +$4,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +$4,000.00</span>
</label>
| Quantity:
<input type="text" name="Q8" id="Q8" value="0" class="quantity">
</li>
<li class="gchoice_9_34_9">
<input id="HI9" type="checkbox" tabindex="30" value="20'x30'|5650" data-price="5650" name="HI9" onChange="updateTotal();">
<label id="label_9_34_9" for="HT9" data-qty="Q9" price=" +$5,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +$5,650.00</span>
</label>
| Quantity:
<input type="text" name="Q9" id="Q9" value="0" class="quantity">
</li>
</ul>
Total Price:
<input name="price" id="price" type="text" readonly="readonly" class="total">

jquery calculations with radio buttons

Hello Stackoverflow community,
I am currently trying to implement the following fiddle : http://jsfiddle.net/8D3tJ/2/ into one of my projects, the main difference though is that I am not using select options but input fields / radio buttons.
Please see my code:
<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
and here my edited jquery part:
<script type="text/javascript">
$(document).ready(function () {
$('.price-option').change(function(){
var price = parseFloat($('.price').data('base-price'));
$('.price-option').each(function(i, el) {
price += parseFloat($('checked:checked', el).data('price'));
});
$('.result span').text(price.toFixed(2));
});
});
</script>
If I am to try this method based on the markup above I have a NaN value returned.
Any ideas how I can make this working? Some expert help would be greatly appreciated.

<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" data-price="10" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" data-price="15" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
IN js
$(document).ready(function () {
$('.radio').change(function(){
var price= parseFloat($('.result').data('base-price'));
$('.radio').each(function(i, el) {
if($(this).is(":checked"))
price += parseFloat($(this).data('price'));
// console.log(parseFloat($(this).data('price')));
});
$('.result span').text(price.toFixed(2));
});
});
check fiddle
here http://jsfiddle.net/C4Lrg/

Here is a fiddle using a radio list to update a price
http://jsfiddle.net/8D3tJ/23/
HTML:
<input id="1" name="1" type="radio" value="5" tabindex="1" class="price-option">
<label for="1">Plus 5</label>
<input id="2" name="1" type="radio" value="10" tabindex="1" class="price-option">
<label for="2">Plus 10</label>
<p>£<span id="price" base-price="50">50</span></p>
JS:
$(function () {
$('.price-option').change(function(){
var price = parseFloat($('#price').attr('base-price'));
price += parseFloat($('.price-option:checked').val());
$('#price').text(price.toFixed(2));
});
});

Beginner Childnodes are being returned as undefined after a clone, so I am unable to set their attributes

I am not sure why I cannot change the attributes of my childnodes. They appear to be coming back as undefined. Im not sure if its because they are in a list or not. After some testing I have found that when I put the nodes in a list things start to hit the fan, I can nologer set any attributes after that
<div id="add_contact" >
<li id="li_3" >
<label class="description" for="element_3"><h2>Contact</h2> </label>
<span>
<input id="element_3_1" name= "acct_first" onchange="javascript:contacts();" value=" " class="element text" maxlength="255" size="20" value=""/>
<label>First</label>
</span>
<span>
<input id="element_3_2" name= "acct_last" onchange="javascript:contacts();" class="element text" maxlength="255" size="20" value=""/>
<label>Last</label>
</span>
</li>
<li id="li_27" >
<label class="description" for="element_27">Email Address </label>
<div>
<input id="element_27" name="acct_cont" onchange="javascript:contacts();" class="element text large" type="text" maxlength="200" value=""/>
<!--<label for="element_15">Seperate Multiple Emails With A Space</label>-->
</div>
<!--<p class="guidelines" id="guide_15"><small>Quality Control Contact</small></p>
p class="guidelines" id="guide_15"><small>Seperate Multiple Emails With A Space</small></p>-->
</li>
<li id="li_4" >
<label class="description" for="element_4">Phone </label>
<span>
<input id="element_4_1" name="acct_phone" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text">
<label for="element_4_1">Please Include Country Code If Outside The United States</label>
<p class="guidelines" id="guide_4_1"><small>Please Include Country Code If Outside The United States</small></p>
</span>
</li>
<li id="li_13" >
<label class="description" for="element_13">Fax </label>
<span>
<input id="element_13_1" name="acct_fax" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text">
<label for="element_13_1"></label>
</span>
</li>
<li id="li_6" >
<label class="description" for="element_6">Type Of Contact (Select all that apply) </label>
<div>
<span>
<input type="checkbox" name="contact" value="">Purchasing<br>
<!--<p class="guidelines" id="guide_6_1"><small>For Questions</small></p>-->
</span>
<span>
<input type="checkbox" name="contact" value="">Quality Control<br>
</span>
<span>
<input type="checkbox" name="contact" value="">Accounts Payable<br>
</span>
</br>
<!--<label for="element_6">Seperate Multiple Emails With A Space</label>-->
</div>
<!--<p class="guidelines" id="guide_6"><small>Seperate Multiple Emails With A Space</small></p> -->
</li>
</div>
MY Script:
var counter = 1;
function moreFields() {
counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var index = 0; index < newField.length; index++) {
document.write(newField[i]);
}
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name
if (theName) newField[i].name = theName + counter;
}
var insertHere = document.getElementById('add_contact');
insertHere.parentNode.insertBefore(newFields, insertHere);
}
I have Created a template without a list and everything works fine but in order to style it with the rest of the form I need it in a list:
<div id="add_contact" style="display:none" >
<label class="description" for="element_3"><h2>Contact</h2> </label>
<input id="element_3_1" name= "acct_first" onchange="contacts();" value=" " class="element text" maxlength="255" size="20" value=""/>
<input id="element_3_2" name= "acct_last" onchange="contacts();" class="element text" maxlength="255" size="20" value=""/>
<input id="element_27" name="acct_cont" onchange="contacts();" class="element text large" type="text" maxlength="200" value=""/>
<input id="element_4_1" name="acct_phone" onchange="contacts();" class="element text" size="20" maxlength="20" value="" type="text">
<input id="element_13_1" name="acct_fax" onchange="contacts();" class="element text" size="20" maxlength="20" value="" type="text">
<input type="checkbox" name="contact" value="">Quality Control
<input type="checkbox" name="contact" value="">Accounts Payable
<input type="checkbox" name="contact" value="">Purchasing
</div>
Using This:
<script>
var counter = 1;
function moreFields() {
counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
newFields.id = '';
for (var index = 0; index < newFields.length; index++) {
console.log(newField[i]);
}
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0; i<newField.length;i++) {
var theName = newField[i].name
newField[i].name = theName + counter;
newField[i].value=newField[i].name;
newField[i].id=newField[i].name;
}
var insertHere = document.getElementById('add_contact');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>

var newInputs = newFields.getElementsByTagName('input');
Allowed me to get to the proper nodes