uncheck box and subtract/add value
My code works except for if I uncheck a checkbox. The value in the total_price box does not update the total - (does not subtract the value of the checkbox that was unchecked.)
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
function cent(amount) {
return (amount == Math.floor(amount)) ? amount + '.00' : ( (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9;
p1 = test.price1.value * 1;
p2 = test.price2.value * 1;
p3 = test.price3.value * 1;
p4 = test.price4.value * 1;
p5 = test.price5.value * 1;
p6 = test.price6.value * 1;
p7 = test.price7.value * 1;
p8 = test.price8.value * 1;
p9 = test.price9.value * 1;
total_price = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9;
test.total_price.value = cent(Math.round(total_price*Math.pow(10,2))/Math.pow(10,2));
}
</script>
<div id="container">
<form method="post" action="" name="test">
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" type="radio" value="0" onclick="this.form.price1.value='0';calculate();" />
I have an existing website. (0 hours)</p>
<p>
<input name="General" type="radio" value="3" onclick="this.form.price1.value='3';calculate();" />
I need a basic blog site. (3 hours)</p>
<p>
<input name="General" type="radio" value="6" onclick="this.form.price1.value='6';calculate();" />
I need a basic, off the shelf, template based site set-up. (6 hours)</p>
<p>
<input name="General" type="radio" value="15" onclick="this.form.price1.value='15';calculate();" />
I need a completely custom site. (15 hours)<br />
<input type="hidden" name="price1" /></p>
</fieldset> <fieldset name="Layout">
<legend class="alignleft">Site Layout</legend>
<p>
<input name="Layout" type="radio" value="0" onclick="this.form.price2.value='0';calculate();" />
I do not need any unique graphics designed. (0 hours)</p>
<p>
<input name="Layout" type="radio" value="3" onclick="this.form.price2.value='3';calculate();" />
I have all my graphics but they need to be integrated. (3 hours)</p>
<p>
<input name="Layout" type="radio" value="6" onclick="this.form.price2.value='6';calculate();" />
I have a template but it needs minor customization. (6 hours)</p>
<p>
<input name="Layout" type="radio" value="10" onclick="this.form.price2.value='10';calculate();" />
I have a template but it needs major customization. (10 hours)</p>
<p>
<input name="Layout" type="radio" value="20" onclick="this.form.price2.value='20';calculate();" /><input type="hidden" name="price2" />
I would like a custom design created for my site. (20 hours) </p>
</fieldset> <fieldset name="Other Graphics">
<legend class="alignleft">Other Graphics</legend>
<p>
<input name="Custom_Graphics" type="checkbox" onclick="checked.this.form.price3.value='4';calculate();" value="4" />
<input type="hidden" name="price3" />
I need some custom graphics made. (4 hours)</p>
<p>
<input name="Mouse_Over" type="checkbox" onchange="this.form.price4.value='4';calculate();" />
I need graphic mouse-over buttons. (4 hours)</p>
<input type="hidden" name="price4" />
<p>
<input name="Few_Photos" type="checkbox" onchange="this.form.price5.value='4';calculate();" />
I need a few stock photographs integrated. (4 hours)</p>
<input type="hidden" name="price5" />
<p>
<input name="Several_Photos" type="checkbox" onchange="this.form.price6.value='9';calculate();" />
I need several stock photographs integrated. (9 hours)</p>
<input type="hidden" name="price6" /></fieldset> <fieldset name="Flash">
<legend class="alignleft">Flash</legend>
<p>
<input name="Flash_Menu" type="checkbox" onchange="this.form.price7.value='6';calculate();" /><input type="hidden" name="price7" />
I need a flash menu. (6 hours)</p>
<p>
<input name="Flash_Animation" type="checkbox" onchange="this.form.price8.value='3';calculate();" /><input type="hidden" name="price8" />
I need a short custom flash animation. (3 hours)</p>
<p>
<input name="Flash_Banner" type="checkbox" id="p9" "onchange="this.form.price9.value='4';calculate();" /><input type="hidden" name="price9" />
I need a flash banner. (4 hours)</p>
<fieldset />
<div>
<input name="total_price" />Total Hours for your site
<script type="text/javascript">
</div>
</form>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
<!-- #EndTemplate -->
</html>
</script>
</div>
</fieldset></form>
</div>
</body>
</html>
Re: uncheck box and subtract value
Here is a modified version of the lines about the checkboxes:
Code:
</fieldset> <fieldset name="Other Graphics">
<legend class="alignleft">Other Graphics</legend>
<p>
<input name="Custom_Graphics" type="checkbox" onclick="this.form.price3.value=4 - Number(this.form.price3.value); calculate();" value="4" />
<input type="hidden" name="price3" />
I need some custom graphics made. (4 hours)</p>
<p>
<input name="Mouse_Over" type="checkbox" onclick="this.form.price3.value=4 - Number(this.form.price4.value);this.form.price4.value='4';calculate();" />
I need graphic mouse-over buttons. (4 hours)</p>
<input type="hidden" name="price4" />
<p>
<input name="Few_Photos" type="checkbox" onclick="this.form.price5.value=4 - Number(this.form.price5.value);calculate();" />
I need a few stock photographs integrated. (4 hours)</p>
<input type="hidden" name="price5" />
<p>
<input name="Several_Photos" type="checkbox" onclick="this.form.price6.value=9 - Number(this.form.price6.value);calculate();" />
I need several stock photographs integrated. (9 hours)</p>
<input type="hidden" name="price6" /></fieldset> <fieldset name="Flash">
<legend class="alignleft">Flash</legend>
<p>
<input name="Flash_Menu" type="checkbox" onclick="this.form.price7.value=6 - Number(this.form.price7.value);calculate();" />
<input type="hidden" name="price7" />
I need a flash menu. (6 hours)</p>
<p>
<input name="Flash_Animation" type="checkbox" onclick="this.form.price8.value=3 - Number(this.form.price8.value);calculate();" />
<input type="hidden" name="price8" />
I need a short custom flash animation. (3 hours)</p>
<p>
<input name="Flash_Banner" type="checkbox" id="p9" "onclick="this.form.price9.value=4 - Number(this.form.price9.value);calculate();" />
<input type="hidden" name="price9" />
I need a flash banner. (4 hours)</p>
<fieldset />
Re: uncheck box and subtract value
Why are you using * 1 after grabbing the value of the checkboxes? If you want it to be treated as a number always, always, always use parseInt(). Make sure for the second parameter you supply 10 so that you are decimal based.
Re: uncheck box and subtract value
Thank you! Thank you! Thank you!
I have been searching the internet for a solution for a month, trying different code and scripts.
I have a question. You say to use parseInt () instead of *1
How would I do this. The script I used was from something else off the internet that I cobbled together.
I am new to javascript and am trying very hard to understand the semantics. But every time I change something my script doesn't work anymore and I am unwilling to change it now that it does work.
This is the 1st forum that has actually helped me with my problem. If you can explain this and tell me how to use the parseInt () in my script so that I can learn from this I would be extremely grateful.
Re: uncheck box and subtract value
add value of dropdown to a total
Once again I am asking for help. I am trying to add to my code from yesterday. What I am trying to do is take the selected <option> value from a dropdown and add it to my calculate function. I have tried using the same code I used with the checkboxes with no luck. My script/form quits working as soon as I get to the selection part.
Any help would be appreciated.
Code:
<script type="text/javascript">
function cent(amount) {
return (amount == Math.floor(amount)) ? amount + '.00' : ( (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9, p10;
p1 = test.price1.value * 1;
p2 = test.price2.value * 1;
p3 = test.price3.value * 1;
p4 = test.price4.value * 1;
p5 = test.price5.value * 1;
p6 = test.price6.value * 1;
p7 = test.price7.value * 1;
p8 = test.price8.value * 1;
p9 = test.price9.value * 1;
p10 = test.price10.value * 1;
total_price = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 + p10;
test.total_price.value = cent(Math.round(total_price*Math.pow(10,2))/Math.pow(10,2));
}
</script>
<fieldset name="Content">
<legend class="alignleft">Content</legend>
<p>
<input name="Content" type="checkbox" onclick="this.form.price10.value=0 - Number(this.form.price10.value); calculate();" value="0" /><input type="hidden" name="price10" />
I will add my content with a content manager.
(0 hours)</p>
<p>I will supply <select id="pages" >
<option ></option>
<option value="3" onclick="this.form.price11.value=3 - Number(this.form.price11.value); calculate();" >1</option>
<option value="6">2</option>
<option value="9">3</option>
<option value="12">4</option>
<option value="15">5</option>
<option value="18">6</option>
<option value="21">7</option>
<option value="24">8</option>
<option value="27">9</option>
<option value="30">10</option>
</select>
pages of content in MS Word or Notepad text.
(3 hours per page)</p>
<p>
Re: add value of dropdown to a total
Re: add value of dropdown to a total
This is still the same basic topic. Please don't create new threads when the main code/issues are the same. Also, please remember that the tags are [code] and not <code>.
I don't have time too look into your code right now, but I will get back to you this evening if no one else posts before that.
Re: uncheck box and subtract/add value
Sorry for the [] mistake. As it was a different problem (option selections as opposed to checkboxes) I posted it as new. Again, sorry. I am awaiting your solution and hopefully with new book will figure this all out.
Thanks!
Re: uncheck box and subtract/add value
First off, you would get the value by using document.getElementById('pages').value. Make sure you use parseInt() on it to get the actual number value and not a string value. Then just add it to the total.
Code:
var thePages = parseInt(document.getElementById('pages').value, 10);
Note: If you are using a server-side processed form, don't forget to supply a name so that the value can be grabbed by the server-side.
Re: uncheck box and subtract/add value
As soon as I add your code my script stops working. I have tried every variation that I can think of and haven't found a solution.
Every time I add the parseInt as suggested for p1-p10 it stops working. As soon as I change it back everything works again.
The parseInt is not working with what I have for code, someway it is interfering with the script running. I get the correct answer without it.
At any rate my problem is with pulling the option value from the drop down(price11)
Here is the code up to price11 and thank you again for your patience.
Code:
<script type="text/javascript">
function cent(amount) {
return (amount == Math.floor(amount)) ? amount + '.00' : ( (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11;
p1 = test.price1.value * 1;
p2 = test.price2.value * 1;
p3 = test.price3.value * 1;
p4 = test.price4.value * 1;
p5 = test.price5.value * 1;
p6 = test.price6.value * 1;
p7 = test.price7.value * 1;
p8 = test.price8.value * 1;
p9 = test.price9.value * 1;
p10 = test.price10.value * 1;
p11 = parseInt(document.getElementById('pages').value, 10);
total_price = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 + p10 + p11;
test.total_price.value = cent(Math.round(total_price*Math.pow(10,2))/Math.pow(10,2));
}
</script>
<div id="container">
<form method="post" action="" name="test">
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" type="radio" value="0" onclick="this.form.price1.value='0';calculate();" />
I have an existing website. (0 hours)</p>
<p>
<input name="General" type="radio" value="3" onclick="this.form.price1.value='3';calculate();" />
I need a basic blog site. (3 hours)</p>
<p>
<input name="General" type="radio" value="6" onclick="this.form.price1.value='6';calculate();" />
I need a basic, off the shelf, template based site
set-up. (6 hours)</p>
<p>
<input name="General" type="radio" value="15" onclick="this.form.price1.value='15';calculate();" />
I need a completely custom site. (15 hours)<br />
<input type="hidden" name="price1" /></p>
</fieldset> <fieldset name="Layout">
<legend class="alignleft">Site Layout</legend>
<p>
<input name="Layout" type="radio" value="0" onclick="this.form.price2.value='0';calculate();" />
I do not need any unique graphics designed.
(0 hours)</p>
<p>
<input name="Layout" type="radio" value="3" onclick="this.form.price2.value='3';calculate();" />
I have all my graphics but they need to be
integrated. (3 hours)</p>
<p>
<input name="Layout" type="radio" value="6" onclick="this.form.price2.value='6';calculate();" />
I have a template but it needs minor customization.
(6 hours)</p>
<p>
<input name="Layout" type="radio" value="10" onclick="this.form.price2.value='10';calculate();" />
I have a template but it needs major customization.
(10 hours)</p>
<p>
<input name="Layout" type="radio" value="20" onclick="this.form.price2.value='20';calculate();" /><input type="hidden" name="price2" />
I would like a custom design created for my site.
(20 hours) </p>
</fieldset> <fieldset name="Other Graphics">
<legend class="alignleft">Other Graphics</legend>
<p>
<input name="Custom_Graphics" type="checkbox" onclick="this.form.price3.value=4 - Number(this.form.price3.value); calculate();" value="4" /><input type="hidden" name="price3" />
I need some custom graphics made. (4 hours)</p>
<p>
<input name="Mouse_Over" type="checkbox" onclick="this.form.price4.value=4 - Number(this.form.price4.value); calculate();" value="4" />
I need graphic mouse-over buttons. (4 hours)</p>
<input type="hidden" name="price4" />
<p>
<input name="Few_Photos" type="checkbox" onclick="this.form.price5.value=4 - Number(this.form.price5.value); calculate();" value="4" />
I need a few stock photographs integrated. (4
hours)</p>
<input type="hidden" name="price5" />
<p>
<input name="Several_Photos" type="checkbox" onclick="this.form.price6.value=9 - Number(this.form.price6.value); calculate();" value="9" />
I need several stock photographs integrated.
(9 hours)</p>
<input type="hidden" name="price6" /></fieldset>
<fieldset name="Flash">
<legend class="alignleft">Flash</legend>
<p><input name="Flash_Menu" type="checkbox" onclick="this.form.price7.value=6 - Number(this.form.price7.value); calculate();" value="6" /><input type="hidden" name="price7" />
I need a flash menu. (6 hours)</p>
<p>
<input name="Flash_Animation" type="checkbox" onclick="this.form.price8.value=3 - Number(this.form.price8.value); calculate();" value="3" /><input type="hidden" name="price8" />
I need a short custom flash animation. (3
hours)</p>
<p>
<input name="Flash_Banner" type="checkbox" onclick="this.form.price9.value=4 - Number(this.form.price9.value); calculate();" value="4" /><input type="hidden" name="price9" />
I need a flash banner. (4 hours)</p>
</fieldset>
<fieldset name="Content">
<legend class="alignleft">Content</legend>
<p>
<input name="Content" type="checkbox" onclick="this.form.price10.value=0 - Number(this.form.price10.value); calculate();" value="0" /><input type="hidden" name="price10" />
I will add my content with a content manager.
(0 hours)</p>
<p>I will supply <select id="pages" >
<option ></option>
<option value="3" onclick="this.form.price11.value=3 - Number(this.form.price11.value); calculate();" >1</option>
<option value="6">2</option>
<option value="9">3</option>
<option value="12">4</option>
<option value="15">5</option>
<option value="18">6</option>
<option value="21">7</option>
<option value="24">8</option>
<option value="27">9</option>
<option value="30">10</option>
</select>
pages of content in MS Word or Notepad text.
(3 hours per page)</p>
Re: uncheck box and subtract/add value
Well, you are doing a lot of things the hard/inefficient way. JavaScript's parseInt() will work fine as long as you use it right. Also, why are you using onclick events for each input? Don't do that...just grab the value in the validation function.
Code:
function validateForm() {
var inputValue = parseInt(document.FORMNAME.FORMITEM.value, 10);
}
Also, you are using radio inputs to set the value of hidden inputs. WHY? Just grab the value directly from the radio input.
Re: uncheck box and subtract/add value
The radio buttons are not hidden values, just the checkboxes. As I said, I am new to this and don't know the easy way around anything. All I have done is use examples off the internet. This has been my first attempt at javascript and it has been a "hair pulling" experience. Everyone expects you to know what they are talking about, and very little in the way of examples and explanation of WHY you have to do it "this way". I have 3 books on Javascript, and only one is being even slightly helpful, so its not like I am not trying to learn.
If I don't know what to do with the function you just gave me and what else I have to do to make it work, it does me no good.
And as far as grab the radio input, how do I do that?
You have my whole document, please explain what I need to do to make it work.
Re: uncheck box and subtract/add value
Then, if you are new to it, you should be reading through some of these results.
Here is how you use a radio input.
Code:
<script type="text/javascript">
function validateForm() {
var temp_something = document.frm.something.value; // this will always return the value of the selected radio with the name "something"
}
</script>
<form name="frm">
<input type="radio" name="something" value="1" />
<input type="radio" name="something" value="2" />
<input type="radio" name="something" value="3" />
<input type="radio" name="something" value="4" />
<input type="radio" name="something" value="5" />
</form>
Re: uncheck box and subtract/add value
I have tried your 1st suggestion p1 = parseInt(test.price1.value, 10);
And my current code is your 2nd suggestion and still no joy.
I have totally taken out all onclicks and added a calculate button on the bottom with a box to return a total in.
There are 3 different kind of buttons (radio, checkbox, and select a number from a dropdown). I have been to W3C site and read the parseInt that you suggested. I have been reading and trying to understand for the last month on the internet the javascript sites. I would really like to understand how to code. There are just so many nuances that you may know from experience and I have no knowledge of. Knowledge is a great thing if you are willing to share it. One can only learn by people sharing what they know with others.
The current code:
Code:
<script type="text/javascript">
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9, p10;
p1 = parseInt(document.getElementById('General').value, 10);
p2 = parseInt(document.getElementById('Layout').value, 10);
p3 = parseInt(document.getElementById('Custom_Graphics').value, 10);
p4 = parseInt(document.getElementById('Mouse_Over').value, 10);
p5 = parseInt(document.getElementById('Few_Photos').value, 10);
p6 = parseInt(document.getElementById('Several_Photos').value, 10);
p7 = parseInt(document.getElementById('Flash_Menu').value, 10);
p8 = parseInt(document.getElementById('Flash_Animation').value, 10);
p9 = parseInt(document.getElementById('Flash_Banner').value, 10);
p10 = parseInt(document.getElementById('Own_Content').value, 10);
total_price = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 + p10;
return parseInt(document.test.total_price.value);
}
</script>
<div id="container">
<form method="post" action="" name="test">
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" type="radio" value="0" />
I have an existing website. (0 hours)</p>
<p>
<input name="General" type="radio" value="3" />
I need a basic blog site. (3 hours)</p>
<p>
<input name="General" type="radio" value="6" />
I need a basic, off the shelf, template based site set-up. (6 hours)</p>
<p>
<input name="General" type="radio" value="15" />
I need a completely custom site. (15 hours)<br />
</p>
</fieldset> <fieldset name="Layout">
<legend class="alignleft">Site Layout</legend>
<p>
<input name="Layout" type="radio" value="0" />
I do not need any unique graphics designed. (0 hours)</p>
<p>
<input name="Layout" type="radio" value="3" />
I have all my graphics but they need to be integrated. (3 hours)</p>
<p>
<input name="Layout" type="radio" value="6" />
I have a template but it needs minor customization. (6 hours)</p>
<p>
<input name="Layout" type="radio" value="10" />
I have a template but it needs major customization. (10 hours)</p>
<p>
<input name="Layout" type="radio" value="20" />
I would like a custom design created for my site. (20 hours) </p>
</fieldset> <fieldset name="Other Graphics">
<legend class="alignleft">Other Graphics</legend>
<p>
<input name="Custom_Graphics" type="checkbox" value="4" />
I need some custom graphics made. (4 hours)</p>
<p>
<input name="Mouse_Over" type="checkbox" value="4" />
I need graphic mouse-over buttons. (4 hours)</p>
<p>
<input name="Few_Photos" type="checkbox" value="4" />
I need a few stock photographs integrated. (4 hours)</p>
<p>
<input name="Several_Photos" type="checkbox" value="9" />
I need several stock photographs integrated. (9 hours)</p>
</fieldset>
<fieldset name="Flash">
<legend class="alignleft">Flash</legend>
<p>
<input name="Flash_Menu" type="checkbox" value="6" />
I need a flash menu. (6 hours)</p>
<p>
<input name="Flash_Animation" type="checkbox" value="3" />
I need a short custom flash animation. (3 hours)</p>
<p>
<input name="Flash_Banner" type="checkbox" value="4" />
I need a flash banner. (4 hours)</p>
</fieldset>
<fieldset name="Content">
<legend class="alignleft">Content</legend>
<p>
<input name="Own_Content" type="checkbox" value="0" />
I will add my content with a content manager. (0 hours)</p>
I will supply
<select id="pages" name="pages" >
<option value="" selected="selected"></option>
<option value="3">1</option>
<option value="6">2</option>
<option value="9">3</option>
<option value="12">4</option>
<option value="15">5</option>
<option value="18">6</option>
<option value="21">7</option>
<option value="24">8</option>
<option value="27">9</option>
<option value="30">10</option>
</select> pages of content in MS Word or Notepad text. (3 hours per
page)
</fieldset>
<div>
<input name="Calculate" type="button" value="Calculate" onclick="calculate()" /><input name="total_price" />Total Hours for your site</div>
</form>
</div>
