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.
