I am trying to add a numerical value to a variable, and have it display inside a div one the radio buttons is clicked.
I just cant seem to pass the value from the variable to the div as below:
$("#150x150").change(function () {
var signCost = $('24.95').val();
document.getElementById('total').innerHTML = $signCost;
});
<div id="total">£</div>
On click of another radio button I may then need to add £5.00 to it.
maybe i was over doing it abit, as reduced it to below, and seemed to work.
var signCost=24.95;
document.getElementById('total').innerHTML = signCost;
My question is now, when i get another variable with a value, is it just a case of adding them together as below.
var lineCost-5.00
var signCost=24.95;
document.getElementById('total').innerHTML = signCost + lineCost;
I checked and it worked, so just asking about the method
Ok I have added them in and as thought I have a problem.
Its fine adding the first amount to the total div, in this case on click of the firstradio button it becomes 24.95.
Then what I need to be able to do is store that value and be able to add to it on click of another radio button, which in this case is 5.00, and it doesnt work.
Here is the project:
http://www.accend4web.co.uk/adam/index3.php
The first thing to do is click the 24.95 size of the slate at the top, then I have added 5.00 to the Recessed border on the other side, so when that is clicked it should add 5.00 to the value, to become 29.95.
as below
$("#150x150").change(function () {
var signCost=24.95;
document.getElementById('total').innerHTML = signCost;
//$("#total").val(signCost);
});
$("#recessed").change(function () {
var lineCost = 5.00;
document.getElementById('total').innerHTML = signCost + lineCost;
});
Hi,
You have to distinguish between variable types.
You can add Numbers together until the cows come home and it will always work as expected:
var myNumber = 42;
myNumber += 10 + 12 + 13 + 77 - 10;
console.log(myNumber);
=> 144
All Number instances inherit from Number.prototype so you can use any of its methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype
var PI = 3.14159265359
console.log(PI.toFixed(3));
=> 3.142
If you are getting integer values as Strings (e.g. from a text input), then you will have to convert them to Numbers first.
var myString = "42";
myString += 10 + 12 + 13 + 77 - 10;
console.log(myString);
=> 42102
var myNumber = Number("42");
myNumber += 10 + 12 + 13 + 77 - 10;
console.log(myNumber);
=> 144
With reference to your code - if you are including jQuery, you might as well use it:
var lineCost = 5,
signCost = 24.95;
$('total').text(signCost + lineCost);
Let me know if anything is unclear.
I was replying to your second post.
Hi Pullo,
I have managed to get the value of the first radio button to appear in the div total, but when i then click the next radio button, adding 5 to it doesnt work.
Its liek it doesnt know what the other value is to add to it if you know what I mean, like its not carrying the variable over.
ah I see…
Yes thanks I went about it the wrong way, thanks again Pullo.
I have just had a thought too, at the moment the value of the radio buttons are what I need to put in an email at the end to send to the company owner as what the person has choosen for their slate sign.
So the value of radio button 150 x 150 is 150x150 because the owners will need to know that, and the same with the border values too, they will need to know if its no border, square border etc. Because they are all inside a form, that will eventually be sent to a second page that will deal with the data and then also send a price to paypal.
Hi Pullo,
Had to leave work I’m sorry so having a go at home now, thanks for the help.
I’m doing this below and the value is coming back as undefined, can you spot anything.
<input type="radio" name="Size" value="150x150" id="150x150" data-size="24.95" />
$("#150x150").change(function () {
var slateSize = $("input.Size").data("size");
document.getElementById('total').innerHTML = "£" + slateSize;
});
Sorry my bad, I was referencing the input name rather than the id as below, and it worked.
var slateSize = $("input#150x150").data("size");
Sorry Pullo,
I forgot about the hint you gave me below to work with.
$(":radio").on("change", function(){
var total = 0;
$(":radio:checked").each(function(){
total += Number(this.value);
});
$("#total").text(total);
});
Because doing it my way I have snookered myself again, as on clicking the second radio I cant get the 2 to add up.
So with the code above I guess that the number(this.value) needs to be changed as we not dealing with the radio value anymore, instead the data value, and with that the data names are different for each radio button, or should I keep them the same, I’m not sure.
This is what I got just to add to the thread, which I know is wrong now.
<input type="radio" name="Size" value="150x150" id="150x150" data-size="24.95" />
<input type="radio" name="Border" value="Recessed" id="recessed" data-border="5.00" />
$("#150x150").change(function () {
var slateSize = $("input#150x150").data("size");
document.getElementById('total').innerHTML = "£" + slateSize;
});
$("#recessed").change(function () {
var borderType = $("input#recessed").data("border");
document.getElementById('total').innerHTML = "£" + slateSize + borderType;
});
Thanks for all the help again Pullo.
Ah lol sorry again I got it sort of working again…
But as always the problem I have encountered another.
Clicking the size radio button add 24.95 fine, then the recessed border works also by adding 5.00 to give a total of 29.95.
But then if they click no border then basically it should go back to just the price of the slate size, and then when I keep clicking the radio button the vale keeps adding up.
So far:
<input type="radio" name="Size" value="150x150" id="150x150" data-size="24.95" />
<input type="radio" name="Border" value="No Border" id="noborder" data-border="0" />
<input type="radio" name="Border" value="Recessed" id="recessed" data-border="5.00" />
$("#150x150").change(function () {
var slateSize = $("input#150x150").data("size");
total += Number(slateSize); $("#total").text(total);
});
$("#noborder").change(function () {
var borderType = $("input#recessed").data("border");
total += Number(slateSize);
$("#total").text(total);
});
$("#recessed").change(function () {
var borderType = $("input#recessed").data("border");
total += Number(borderType);
$("#total").text(total);
});
Lol, well that’s kind of progress.
If you make me a demo with just the radio buttons, I’ll have a look at what’s going wrong.
Hi Pullo,
I have trimmed it right back and put it here -
http://www.accend4web.co.uk/adam/index5.php
Basically at the moment, there only one sign option but there will be around 6, and that is the basic price, then the user can add a border for an extra £5, or if they choose no border then price stays the same.
So at the moment, it sort of works, but the price keeps going up whrn you click the various border typs when really all that needs to be done is £5 is added to the price of the slate sign that has been choosen, and if they then think no thanks no border the 5 comes off leaving the sign price only.
What was also happening before was if I kept on clicking the same border size radio button it kept adding £5 to the total, which doesnt happen now in the trimmed down version.
The other complete version is -
http://www.accend4web.co.uk/adam/index3.php
Thats is where I am at at the moment, but as you know once passed this im sure there be more, but at least its progress.
Thanks
Hi,
The problem is that you are continuously adding to the total:
$("#square").change(function () {
var borderType = $("input#recessed").data("border");
total += Number(borderType);
$("#total").text(total);
});
You need to put that logic in its own function:
$("#square").change(function () {
calculateTotal();
});
and within the calculateTotal function, get a reference to every checked radio button that you wish to sum and add them together:
function calculateTotal(){
var total = 0;
$(":radio:checked").each(function(){
total += $(this).data("value");
});
$("#total").text(total);
}
HTH
Thanks Pullo,
I implemented the code above and there a problem, and I have tried to resolve it without much luck.
http://www.accend4web.co.uk/adam/index3.php
When clicking the size radio button, the 24.95 appears fine, but the value of the border doesnt add to the size cost but instead adds itself next the 24.95 and you get 24.955.00 and also undefined appears twice after it.
I worked out that I needed to change all the data names to data-value and all the costings are right, so I think I done right there.
Im a bit stuck sorry, but will keep on looking and trying.
I added:
calculateTotal();
to each change function as below:
$("#150x150").change(function () {
document.getElementById("textWrapper").style.visibility="visible";
document.getElementById("controlButtons").style.visibility="visible";
document.getElementById("slider").style.visibility="visible";
document.getElementById("font_size").style.visibility="visible";
document.getElementById("textWrapper").style.width="100px";
document.getElementById("textWrapper").style.height="100px";
document.getElementById("textWrapper").style.marginTop="0px";
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Base.jpg)";
document.getElementById("copySecond").style.visibility="hidden";
document.getElementById("copyThird").style.visibility="hidden";
document.getElementById("secondline").style.visibility="hidden";
document.getElementById("thirdline").style.visibility="hidden";
document.getElementById("copyFirst").style.top="28px";
document.getElementById("copyFirst").style.left="8px";
document.getElementById("copyFirst").style.margin="auto 0";
document.getElementById("textBox1").style.width="100px";
document.getElementById("font_size").style.marginTop="2px";
calculateTotal();
$("#noborder").change(function () {
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Base.jpg)";
document.getElementById('radioborder').checked = true;
calculateTotal();
});
$("#recessed").change(function () {
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Recessed.jpg)";
document.getElementById('radioborder').checked = true;
calculateTotal();
});
$("#square").change(function () {
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Square.jpg)";
document.getElementById('radioborder').checked = true;
calculateTotal();
});
$("#rounded").change(function () {
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Rounded.jpg)";
document.getElementById('radioborder').checked = true;
calculateTotal();
});
And added the calculateTotal function as the first function at the top
$(document).ready(function () {
function calculateTotal(){
var total = 0;
$(":radio:checked").each(function(){
total += $(this).data("value");
});
$("#total").text(total);
}
Can you make me a slimmed down version like before?
That really helped.
I’m sure it won’t be anything too complicated
I have worked out what the undefine’s are that add themselves to the end of the total, and they seem to be the CHECK LIST that I have there, as they are being checked they are being added into the equation I think.
And also when you select the size and then go around and check some of the radio buttons and also add text it does some odd things, so I’m guessing the checking of the radio buttons is causing the extra problems.
I could take the check list out if its causing problems.
Yes no problem, Im thinking to break it down into each problem so to speak, so this being the first one, where they not adding but instead showing both values next to each other.