-
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>
-
Re: uncheck box and subtract/add value
First of all, getElementById will, well, get the element by id.
all of your elements are described by the name property, but they have no id property.
Secondly, the checkboxes that have the same name will create an array. You would not be able to just grab the value of the array, you would need to add up each value in the array.
As PeejAvery suggested before, if you are new to javascript then try reading some tutorials. Or maybe pick up a book on javascript .
You need to gain some basic knowledge of the language yourself so that you can do most of the debugging and troubleshooting on your own.
-
Re: uncheck box and subtract/add value
Have 3 books on javascript, only one even helps slightly. I need to see something that applies to my situation so that I can see what I have done wrong.
I already saw the id mistake and have fixed that.
-
Re: uncheck box and subtract/add value
Second my checkboxes all have different names
-
Re: uncheck box and subtract/add value
Sorry... don't know how i missed that about the checkboxes.
Anyways, the id for each element must be different.
So you shouldn't have 4 radio inputs with id = "General"
maybe try: id = "General_0"
id = "General_3" ... etc
but then, you cannot just have it add all of the id's together, because it will add all the values weather it is checked or not.
so you need to add conditional statments to verify the which is currently checked.
Code:
if (document.getElementById('General_0').checked == true){
p1 = parseInt(document.getElementById('General_0').value, 10);
}else if (document.getElementById('General_3').checked == true){
p1 = parseInt(document.getElementById('General_3').value, 10);
}else if( .........
this should work out for you.
if you are still having trouble, please post your current code again.
-
Re: uncheck box and subtract/add value
Ok, if the radio buttons have different id's they won't act like radio buttons.
(If one is "selected" the others automatically are "unselected".) So don't I need some kind code inserted that picks the "checked" up? Which is what I thought I was doing.
Here is the corrected code (without the last fix in place) Since I have totally trashed all the code and started new, I have a calculate button which is supposed to return the total_price (which it doesn't work, and I don't know why).
This is a demo webpage so you can get an idea of what I am trying to do
http://www.certainwebdesign.com/fake%20est2.htm
Code:
<script type="text/javascript">
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9, p10;
p1 = parseInt(document.getElementsByName('General').value, 10);
p2 = parseInt(document.getElementsByName('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 (total_price);
}
</script>
<div id="container">
<form method="post" action="" name="test">
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" type="radio" checked="checked" 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" checked="checked" 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 id="Custom_Graphics" type="checkbox" value="4" />
I need some custom graphics made. (4 hours)</p>
<p>
<input id="Mouse_Over" type="checkbox" value="4" />
I need graphic mouse-over buttons. (4 hours)</p>
<p>
<input id="Few_Photos" type="checkbox" value="4" />
I need a few stock photographs integrated. (4 hours)</p>
<p>
<input id="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 id="Flash_Menu" type="checkbox" value="6" />
I need a flash menu. (6 hours)</p>
<p>
<input id="Flash_Animation" type="checkbox" value="3" />
I need a short custom flash animation. (3 hours)</p>
<p>
<input id="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 id="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 id="total_price" />Total Hours for your site</div>
-
Re: uncheck box and subtract/add value
the name property determines the radio groups, not the id
Code:
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" id="General_0" type="radio" checked="checked" value="0" />
I have an existing website. (0 hours)</p>
<p>
<input name="General" id="General_3" type="radio" value="3" />
I need a basic blog site. (3 hours)</p>
<p>
<input name="General" id="General_6" type="radio" value="6" />
I need a basic, off the shelf, template based site set-up. (6 hours)</p>
<p>
<input name="General" id="General_15" type="radio" value="15" />
I need a completely custom site. (15 hours)<br />
</p>
</fieldset>
try that along with the conditional statements I posted before.
-
Re: uncheck box and subtract/add value
as for the calculate button,
replace "return (total_price);" with this:
Code:
document.getElementByID('total_price').value = total_price;
-
Re: uncheck box and subtract/add value
The code you gave is working except for the fact that with no buttons activated except "0" values, I get a total of 34. I have looked several times in the code to see what is returning a value and see nothing.
Any ideas. Is there a way to make the script run 1 step at a time to see where it is coming from.
The updated page is here:
http://www.certainwebdesign.com/fake%20est2.htm
Code:
<script type="text/javascript">
function calculate() {
var p1, p2, p3, p4, p5, p6, p7, p8, p9, p10;
if (document.getElementById('g0').checked==true)
{p1 = parseInt(document.getElementById('g0').value, 10);
}
else if (document.getElementById('g3').checked == true)
{p1 = parseInt(document.getElementById('g3').value, 10);
}
else if (document.getElementById('g6').checked == true)
{p1 = parseInt(document.getElementById('g6').value, 10);
}
else if (document.getElementById('g15').checked == true)
{p1 = parseInt(document.getElementById('g15').value, 10);
}
if (document.getElementById('L0').checked == true)
{p2 = parseInt(document.getElementById('L0').value, 10);
}
else if (document.getElementById('L1').checked == true)
{p2 = parseInt(document.getElementById('L1').value, 10);
}
else if (document.getElementById('L6').checked == true)
{p2 = parseInt(document.getElementById('L6').value, 10);
}
else if (document.getElementById('L10').checked == true)
{p2 = parseInt(document.getElementById('L10').value, 10);
}
else if (document.getElementById('L20').checked == true)
{p2 = parseInt(document.getElementById('L20').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); parseInt(document.getElementById('total_price').value = total_price);
}
</script>
<div id="container">
<form method="post" action="" name="test">
<fieldset name="General">
<legend class="alignleft">General</legend>
<p>
<input name="General" id ="g0" type="radio" checked="checked" value="0" />
I have an existing website. (0 hours)</p>
<p>
<input name="General" id="g3" type="radio" value="3" /> I need a
basic blog site. (3 hours)</p>
<p>
<input name="General" id="g6" type="radio" value="6" /> I need a basic,
off the shelf, template based site set-up. (6 hours)</p>
<p>
<input name="General" id="g15" 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" id ="L0"type="radio" checked="checked" value="0" />
I do not need any unique graphics designed. (0 hours)</p>
<p>
<input name="Layout" id ="L1"type="radio" value="3" /> I have all my
graphics but they need to be integrated. (3 hours)</p>
<p>
<input name="Layout" id ="L6"type="radio" value="6" /> I have a template
but it needs minor customization. (6 hours)</p>
<p>
<input name="Layout" id ="L10"type="radio" value="10" /> I have a template
but it needs major customization. (10 hours)</p>
<p>
<input name="Layout" id ="L20"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 id="Custom_Graphics" type="checkbox" value="4" /> I need
some custom graphics made. (4 hours)</p>
<p>
<input id="Mouse_Over" type="checkbox" value="4" /> I need graphic
mouse-over buttons. (4 hours)</p>
<p>
<input id="Few_Photos" type="checkbox" value="4" /> I need a
few stock photographs integrated. (4 hours)</p>
<p>
<input id="Several_Photos" type="checkbox" value="9" /> I
need several stock photographs integrated. (9 hours)</p>
</fieldset>
<div>
<fieldset name="Flash">
<legend class="alignleft">Flash</legend>
<p>
<input id="Flash_Menu" type="checkbox" value="6" /> I need a
flash menu. (6 hours)</p>
<p>
<input id="Flash_Animation" type="checkbox" value="3" /> I
need a short custom flash animation. (3 hours)</p>
<p>
<input id="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 id="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 id="total_price" />Total
Hours for your site</div>
</form>
</div>
-
Re: uncheck box and subtract/add value
Come on now... I would have figured you would get this part on your own. Its pretty much the same problem you just fixed.
Add up the values of all your checkboxes, and you get 34.
You need conditional statments for the checkboxes. Which means you also need id's for them as well.
Your code is adding the values of all the checkboxes without seeing if they are checked or not.
Also, it looks like you need to add some code in to calculate the pages dropdown.
replace this at the end of your javascript:
Code:
p11 = parseInt(document.getElementById('pages').value, 10);
total_price = (p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9 + p10 + p11);
document.getElementById('total_price').value = parseInt(total_price);
and change the first option of the dropdown to:
Code:
<option value="0">0</option>
-
Re: uncheck box and subtract/add value
Ok, I tried the conditional before I messaged:
Code:
if (document.getElementById('Custom_Graphics').checked == true)
{p3 = parseInt(document.getElementById('Custom_Graphics').value, 10);
}
and returned NaN.
The 2 radio buttons worked on calculate until I added the p3 statement which is when I get the NaN.
This was why I asked the last question in the last message.
Code:
<input id="Custom_Graphics" type="checkbox" value="4" /> I need
some custom graphics made. (4 hours)</p>
<p>
<input id="Mouse_Over" type="checkbox" value="4" /> I need graphic
mouse-over buttons. (4 hours)</p>
<p>
<input id="Few_Photos" type="checkbox" value="4" /> I need a
few stock photographs integrated. (4 hours)</p>
<p>
<input id="Several_Photos" type="checkbox" value="9" /> I
need several stock photographs integrated. (9 hours)</p>
-
Re: uncheck box and subtract/add value
OK, this works. Don't know if its good javascript or not. Please comment, if not. Let me know what's not kosher.
Thanks big time for your help! I really appreciate you taking the time. Believe it or not I was really trying to understand what I am doing.
Code:
if (document.getElementById('Custom_Graphics').checked == true)
{p3 = parseInt(document.getElementById('Custom_Graphics').value, 10);
}
else if (document.getElementById('Custom_Graphics').checked == false)
{p3 = parseInt(0)}
-
Re: uncheck box and subtract/add value
That will work, but there is a simpler way.
The problem is that if the checkbox does not get marked, the p# does not get a value.
The easy fix is to declare p3-p10 as =0 in the begining of the javascript. That way if nothing gets checked, it is still 0.
Code:
function calculate() {
var p3=0, p4=0, p5=0, p6=0, p7=0, p8=0, p9=0, p10=0;
-
Re: uncheck box and subtract/add value
And not use the "else if" statement?
-
Re: uncheck box and subtract/add value
correct,
the "else if" that is used to set the variable to 0 would no longer be needed
-
Re: uncheck box and subtract/add value
Thank you again for all your help. This is the first time I have understood what someone was talking about when it comes to "radio button, checkboxes, and option button" javascript and how to get the values. The final script that I have got is simple to understand, without a bunch of mumbo jumbo. And you explained it very well. I am glad to have made your acquaintance.
-
Re: uncheck box and subtract value
Quote:
Originally Posted by PeejAvery
Could you use
Code:
var num = Number(MyString);
If you knew that "MyString" is always going to be convertible with no errors?
Would it be faster too? (Kinda off-topic)
-
Re: uncheck box and subtract/add value
Quote:
Originally Posted by tcertain
Thank you again for all your help. This is the first time I have understood what someone was talking about when it comes to "radio button, checkboxes, and option button" javascript and how to get the values. The final script that I have got is simple to understand, without a bunch of mumbo jumbo. And you explained it very well. I am glad to have made your acquaintance.
no problem, glad to help
