i just changed my question to show my attempt at it. This is what im trying to do. The XPlevels have a set value, and using that i wanna calculate and display the price
function setprice() {
var val;
var type = document.getElementByName("XP")
if (type[0].checked)
{
var val = 200;
}
else if (type[1].checked)
{
var val = 150;
}
else if (type[2].checked)
{
var val = 100;
}
}
function Calculate() {
var FName = document.getElementById("FName");
var numppl = document.getElementById("numppl");
var Tprice = val * numppl;
window.alert(FName + ", the membership amount is: R " + BasePrice);
<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate" onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert" onclick="setprice" />Expert
<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="Calculate"/>
You can use onclick event on the Calculate Fee Button to call a JavaScript Function that checks which radio button is selected.
const calculateFee = () => {
let radioButtons = document.querySelectorAll("input");
for(let i=0; i<3; i++){
if(radioButtons[i].checked){
console.log(`Checked Radio Button is : ${radioButtons[i].value}`);
}
}
}
<input type="radio" name="XP" value="Novice" />Novice
<input type="radio" name="XP" value="Intermediate" checked />Intermediate
<input type="radio" name="XP" value="Expert" />Expert
<br />
<label for="Members">Number of members</label>
<input type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="calculateFee()"/>
This is an edit of your JS code
function setprice() {
var type = document.querySelectorAll('[name="XP"]');
if (type[0].checked) {
var val = 200;
}
else if (type[1].checked) {
var val = 150;
}
else if (type[2].checked) {
var val = 100;
}
return val;
}
function calculate() {
var fName = document.getElementById("FName");
var numppl = document.getElementById("numppl");
var val = setprice();
var tprice = val * numppl.value;
// window.alert(FName + ", the membership amount is: R " + BasePrice);
console.log(tprice);
}
<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate" onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert" onclick="setprice" />Expert
<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />
<input type="button" value="Calculate fee" onclick="calculate()" />
This example a more correct approach to what you want
On each radio button, the value is the number (unit price) to be calculated. I have added a data attribute from which to take "Type"
The input named member must be set to a minimum value so that the user cannot set a negative value.
Try this code and if you have any questions I will supplement my answer!
var radio = document.querySelectorAll('.radio');
var number = document.querySelector('.number');
var button = document.querySelector('.button');
var getval;
var datainf;
button.addEventListener('click', function () {
radio.forEach(function (el) {
if (el.checked) {
getval = +el.value;
datainf = el.getAttribute('data');
}
});
var result = getval * number.value;
console.log( 'Quantity: ' + number.value + ' / Type: ' + datainf + ' / The membership amount is: ' + result);
});
<input type="radio" class="radio" name="XP" value="200" data="Novice" />Novice
<input type="radio" class="radio" name="XP" value="150" data="Intermediate" checked />Intermediate
<input type="radio" class="radio" name="XP" value="100" data="Expert" />Expert
<br />
<label for="Members">Number of members</label>
<input type="number" class="number" name="Members" size="2" value="1" min="1" />
<input type="button" class="button" value="Calculate fee" />
Related
I have some range sliders and input fields. From that I'm getting some equations now I want to subtract those dynamic numbers by their ID. Below is the code but I'm getting NaN value. Below the steps, I've done.
Getting #totalavgtime from the multiplication of range slider and .averagetime
Getting #timetoproduce from the multiplication of range slider and .radio-roi next input value.
Now trying to subtract #totalavgtime - #timetoproduce but getting NaN value in #timesaving.
$(document).ready(function() {
$(".range").on("change", function() {
var mult = 0;
$('.range').each(function(i) {
var selector_next = parseInt($(".averagetime:eq(" + i + ")").attr("value"))
mult += parseInt($(this).val()) * selector_next //multply..
console.log($(".averagetime:eq(" + i + ")").attr("value"), $(this).val())
})
$("#totalavgtime").val(mult)
})
});
$(document).ready(function() {
$('.range').on('change', function() {
let n = $(this).attr('id').match(/\d+/g)[0];
let total = 0;
let checkVal = $('.radio-roi:checked').next('input').val();
let multiplyFactor = parseFloat(checkVal);
console.log(multiplyFactor)
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').value(total);
})
});
$(document).ready(function() {
var txt1 = parseInt(document.getElementById("totalavgtime").value);
var txt2 = parseFloat(document.getElementById("timetoproduce").value);
var res = document.getElementById("timesaving");
Number(txt1);
Number(txt2);
//Substract that
res.value = txt1 - txt2;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>
<input type="text"value="6" id="avgtime-id" class="averagetime"disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><br>
<input type="text"id="totalavgtime" value="" disabled><br>
<input type="text"id="timetoproduce" value="" disabled><br>
<input type="text"id="timesaving" value="" disabled><br>
You can merge both event handler in one as both are triggering same elements . So , inside this on each iteration get value of range slider and add total to same variable and set them in required input . Now , to subtract them check if the value is not null depending on this take value of input else take 0 to avoid NaN error.
Demo Code :
$(document).ready(function() {
$(".range").on("change", function() {
$(this).next().text($(this).val()) //for output(range)
var selector_next_avg = 0;
var timetoproduce = 0
var checkVal = parseFloat($('.radio-roi:checked').next('input').val()); //radio next input
$('.range').each(function(i) {
var selector_next = parseInt($(".averagetime:eq(" + i + ")").val()) //avg..input
selector_next_avg += parseInt($(this).val()) * selector_next;
timetoproduce += (parseFloat($(this).val()) * checkVal);
})
//set both values
$("#totalavgtime").val(selector_next_avg)
$('#timetoproduce').val(timetoproduce);
total() //call to total..(sub)
})
});
function total() {
var txt1 = $("#totalavgtime").val() != "" ? parseFloat($("#totalavgtime").val()) : 0; //if null take 0
var txt2 = $("#timetoproduce").val() != "" ? parseFloat($("#timetoproduce").val()) : 0;
$("#timesaving").val(txt1 - txt2); //set value
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>
<input type="text" value="6" id="avgtime-id" class="averagetime" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><output></output><br>
<input type="text" id="totalavgtime" value="" disabled><br>
<input type="text" id="timetoproduce" value="" disabled><br>
<input type="text" id="timesaving" value="" disabled><br>
I would like to make a variable which has the values of 1 or multiple checkboxes, based on which one is selected. This is what I came up with for now:
var checkbox1 = document.getElementById("value1");
var checkbox2 = document.getElementById("value2");
var checkbox3 = document.getElementById("value3");
var showvalue = document.getElementById("show-value");
document.querySelectorAll('input[type=checkbox]')
.forEach(box => box.addEventListener('change', showValue));
function showValue() {
if (checkbox1.checked === true) {
showvalue.value = checkbox1.value;
}
}
<input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label>
<input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label>
<input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label>
<input id="show-value" type="hidden"/>
But I don't know how to iterate through checkboxes and if the specific one is checked, add it to variable showvalue. So what I want for showvalue is something like this (based on which checkbox is checked):
var showvalue = checkbox1.value + ", " + checkbox2.value + ", " + checkbox3.value;
How do I iterate through checkboxes and then if checked = true add that value to showvalue?
For showing I delete the hidden from the showvalue-inputfield and set it to readonly.
For calculating the result I go with foreach through the checkboxes and add if checked to the resultstring the value. The separator , is only set if there is already a partresult. After this at the end just update the value from showvalue.
var checkbox1 = document.getElementById("value1");
var checkbox2 = document.getElementById("value2");
var checkbox3 = document.getElementById("value3");
var showvalue = document.getElementById("show-value");
document.querySelectorAll('input[type=checkbox]')
.forEach(box => box.addEventListener('change', showValue));
function showValue() {
let value = '';
document.querySelectorAll('input[type=checkbox]').forEach(box => {
if (box.checked === true) {
if (value.length) value += ', ';
value += box.value;
}
});
showvalue.value = value;
}
.readonly { background: yellow;}
<input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label>
<input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label>
<input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label>
<input id="show-value" size=40 class="readonly" readonly/>
you can try this:
var showvalue = document.getElementById("show-value");
var checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach(box => box.addEventListener('change', showValue));
function showValue() {
showvalue.value = Array.from(checkboxes).map(e => e.checked ? e.value : null).filter(Boolean).join(", ");
}
<input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label>
<input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label>
<input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label>
<input id="show-value" type="text"/>
Just use querySelector and use name attribute to check for what is checked or not. An example:
let result = [];
const setup = () => {
const entry1 = document.querySelectorAll('[name="entry1"]');
entry1.forEach(input => input.addEventListener('change', onChange));
}
const onChange = () => {
const checkedEntry1 = document.querySelectorAll('[name="entry1"]:checked');
result = [];
checkedEntry1.forEach(input => result.push(input.value));
document.querySelector('#show-value').value = result.join(', ');
}
//load
window.addEventListener('load', setup);
<input id="value1" name="entry1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label>
<input id="value2" name="entry1" type="checkbox" value="6 maanden"><label for="value2">Value 2</label>
<input id="value3" name="entry1" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label>
<input id="show-value" type="hidden">
Is it that what you were looking for?
var checkbox1 = document.getElementById("value1");
var checkbox2 = document.getElementById("value2");
var checkbox3 = document.getElementById("value3");
document.querySelectorAll('input[type=checkbox]')
.forEach(box => box.addEventListener('change', showValue));
function showValue() {
if (checkbox1.checked === true) {
var box1 = checkbox1.value;
}else{
var box1 = '';
}
if (checkbox2.checked === true) {
var box2 = checkbox2.value;
}else{
var box2 = '';
}
if (checkbox3.checked === true) {
var box3 = checkbox3.value;
}else{
var box3 = '';
}
document.getElementById("show").value = box1 + ';' + box2 + ';' + box3;
}
<input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label>
<input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label>
<input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label>
<input id="show" class="readonly" readonly/>
document.querySelectorAll('input[type=checkbox]')
.forEach(box => box.addEventListener('input', showValue));
function showValue(event) {
var input = event.target;
var showvalue = document.getElementById('show-value');
showvalue.value += input.value;
// tern if statment
input.checked ? showvalue.type = 'text' : showvalue.type = 'hidden';
// you can used the original if statment
if (input.checked) {
showvalue.type = 'text';
} else {
showvalue.type = 'hidden';
}
}
My code updates the CPC textbox when options are selected, but when an agency discount is selected (i.e. the 10% checkbox), it successfully lowers the CPC textbox value by 10% but does not do the same for the Total Cost textbox.
The Total Cost textbox value should be the (CPC textbox value * number of clicks textbox) * percentdiscount multiplier
Can anyone see where I'm going wrong? I'll be happy to clarify further if I haven't explained this very well!
HTML:
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
<div class="black_whitelisting">
<h1>4. Blacklist/Whitelist?</h1>
<input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" onclick="BlacklistFunction()">Blacklist required<br>
<input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>
<div class="selecttier">
<h1>5. Number of Clicks</h1>
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" value="1" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9" onclick="calculatetotalcost10()" >
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85" onclick="calculatetier15()" >
15% Discount
</label>
</div>
Javascript:
jQuery(function($) {
$('input[name="percentdiscount"]').on('change', function() {
applyDiscount();
});
$('input[type=checkbox]').click(function() {
let sum = 0;
$('input[type=checkbox]:checked').each(function() {
sum += parseFloat($(this).val());
});
$('#sum').val(sum.toFixed(2)).data('total', sum);
applyDiscount();
});
function applyDiscount() {
var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
$('#sum').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
}
});
//to work out total cost
function calculatetier() {
var myBox5 = document.getElementById('numberofclickstextbox').value;
var myBox6 = document.getElementById('sum').value;
var result = document.getElementById('totalcost');
var myResult = myBox5 * myBox6;
result.value = myResult.toFixed(2);
}
Looks like you are calculatetier function isn't being called during the change of discount.
Working Demo: https://codepen.io/punith/pen/gOpaVxr?editors=1010
HTML code
<div class="runningtotal">
Running CPC Total (in £): <input id="sum" type="text" readonly="true" value="0.00" data-total="0" />
Total Cost (in £): <input id="totalcost" type="text" readonly="true" value="0 (until clicks specified)" data-total="0" />
</div>
<div class="black_whitelisting">
<h1>4. Blacklist/Whitelist?</h1>
<input type="checkbox" class="blacklist" name="blacklist" value="0.20" id="blacklist_checkbox" >Blacklist required<br>
<input type="checkbox" class="whitelist" name="whitelist" value="0.30" id="whitelist_checkbox">Whitelist required<br>
</div>
<div class="selecttier">
<h1>5. Number of Clicks</h1>
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" oninput="calculatetier()" />
</div>
<div class="agencydiscount">
<h1>6. Agency Discount</h1>
<label>
<input type="radio" name="percentdiscount" value="1" checked>
None
</label>
<label>
<input type="radio" name="percentdiscount" id="10percent" value="0.9" >
10% Discount
</label>
<label>
<input type="radio" name="percentdiscount" id="15percent" value="0.85" >
15% Discount
</label>
</div>
JS Code
function calculatetier() {
var myBox5 = document.getElementById('numberofclickstextbox').value;
var myBox6 = document.getElementById('sum').value;
var result = document.getElementById('totalcost');
if(myBox6=="0.00"){
myBox6 =1;
}
console.log(myBox6)
var myResult = myBox5 * myBox6;
result.value = myResult.toFixed(2);
}
jQuery(function($) {
$('input[name="percentdiscount"]').on('change', function() {
applyDiscount();
});
$('input[type=checkbox]').click(function() {
let sum = 0;
$('input[type=checkbox]:checked').each(function() {
sum += parseFloat($(this).val());
});
$('#sum').val(sum.toFixed(2)).data('total', sum);
applyDiscount();
});
//to work out total cost
function applyDiscount() {
var pc = parseFloat($('input[name="percentdiscount"]:checked').val());
$('#sum').val(function() {
return ($(this).data('total') * pc).toFixed(2);
});
calculatetier()
}
});
try to use onchange event instead I guess the event you are binding is not correct
<input id="numberofclickstextbox" type="text" value="0.00" data-total="0" onchange="calculatetier()" />
I have the following form:
<form id="taskform">
Habit: <input id="taskname" type="text">
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform">Description Here...</textarea>
<div>
Good or Bad:
<input type="radio" id="star" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star" name="priority" value="2"/><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date">
Times you want to do it: <input type="number" id="reminderdays" min="0">
<span type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn" >Add Habit</span>
<input type="reset" value="Clear">
</form>
I have a js function which takes the values of each field here and it should add them together:
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar = document.getElementById("star").value;
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
var t1 = document.createTextNode(inputValue);
var t2 = document.createTextNode(inputDescription);
var t3 = document.createTextNode(inputStar);
var t4 = document.createTextNode(inputDate);
var t5 = document.createTextNode(inputReminderDays);
now I am trying to combine all of the strings t1,t2,t3,t4 and t5 together and then add to a list object.
it does add to a list if I use just for example t1, by doing this:
li.appendChild(t1);
if I use concat and try to add t2, t3, t4 and t5 to my t1 and then use this
li.appendChild(res);
with res being the sum of all of the values my list is empty and nothing is added,
i am not sure how to do this, I dont know why concat or + doesnt work.
also I can not get the value for my date and radio for some reason.
If all you want to do is to combine the strings then nhy not try this:
var t1 = document.createTextNode(inputValue+' '+inputDescription+' '+inputStar+' '+inputDate+' '+inputReminderDays);
UPDATE:
var output = document.getElementById('output');
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("taskname").value;
var inputDescription = document.getElementById("taskdesc").value;
var inputStar1 = document.getElementById("star1");
var inputStar2 = document.getElementById("star2");
var inputDate = document.getElementById("deadlinedate").value;
var inputReminderDays = document.getElementById("reminderdays").value;
// Since you only have two radio buttons you can use a ternary to get the right value base on if oneis checked or not.
var inputStar = inputStar1.checked ? inputStar1.value : inputStar2.value;
var t1 = document.createTextNode(inputValue + ', ' + inputDescription + ', ' + inputStar + ', ' + inputDate + ', ' + inputReminderDays);
li.appendChild(t1);
output.appendChild(li);
}
<form id="taskform">
Habit: <input id="taskname" type="text"><br/>
<textarea id="taskdesc" rows="4" cols="50" name="comment" form="usrform" placeholder="Description Here..."></textarea>
<div>
Good or Bad:
<input type="radio" id="star1" name="priority" value="1" checked/><label for="star1" title="Not very important">Good</label>
<input type="radio" id="star2" name="priority" value="2" /><label for="star2" title="Kinda important">Bad</label>
</div>
<br>Starting Date: <input id="deadlinedate" type="date"> Times you want to do it: <input type="number" id="reminderdays" min="0" value="1">
<button type="button" id="sBtn" value="Add Habit" onclick="newElement()" class="addBtn">Add Habit</button>
<input type="reset" value="Clear">
</form>
<hr/>
<ul id="output">
</ul>
I m learning jquery a bit so i created this fiddle here http://jsfiddle.net/8FXFE/17/
this is my html code
<div class="textForm">
<input type="radio" name="txtNumber" value="100" checked="checked" />100
<input type="radio" name="txtNumber" value="200" />200
<input type="radio" name="txtNumber" value="500" />500
<input type="radio" name="txtNumber" value="1000" />1000
<input type="radio" name="txtNumber" value="10000" />10000
<input type="radio" name="txtNumber" value="other" />other
<input type="text" name="other_field" id="other_field" onblur="checktext(this);"
/>
</div>
<div class="formText">
<input type="radio" name="txtSpace" value="RJ" checked="checked"
/>Space 1.
<br />
<input type="radio" name="txtSpace" value="SM" />Space 2.
<br />
</div>
<h3>Output:</h3>
this is css
#other_field {
display: none;
}
this is jquery
$(document).ready(function () {
console.log("parsed");
$("input[name='txtNumber'],input[name='txtSpace']").change(function () {
$("#output").text("Changed to "+$("input[name='txtNumber']:checked").val() + " " +$("input[name='txtSpace']:checked").val() + " +++++SOME FIXED VALUE OF TXTSPACE (i.e. SAY if RJ = 100 or if SM = 50) x VALUE OF TXTNUMBER++++++"
);
});
});
$(':radio').on('change', function () {
$('#other_field')[$(this).val() === 'other' ? 'show' : 'hide']();
});
$('#other_field').on('blur', function () {
var val = $(this).val();
if(isNaN(val)) {
alert('only numbers are allowed..');
}
else if(parseInt(val, 10) % 10 > 0) {
alert('only multiples of 10..');
}
});
How can i achieve actual output those shown in capital letters inside +++++++++++
SOME FIXED VALUE OF TXTSPACE (i.e. SAY if RJ = 100 or if SM = 50) x VALUE OF TXTNUMBER
Also How can i add dynamic value of hidden other_field (if selected)
var value = $("input[name='txtNumber']:checked").val();
if(value == "other"){
value = parseInt($("#other_field").val());
}
if(!value || isNaN(value)) value = 0;
var type = $("input[name='txtSpace']:checked").val();
var fixedMultiplier;
switch(type){
case "RJ": fixedMultiplier = 100; break;
case "SM": fixedMultiplier = 50; break;
default: fixedMultiplier = 1; break;
}
var computedValue = value * fixedMultiplier;
$("#output").text("Changed to "+ value + " " + type + " (" + computedValue + ")");
http://jsfiddle.net/8FXFE/19/
Maybe you should also add a handler to the textfield to update output on keyup.