JS "onchange" does not seem to work...

fuzzybabybunny · Feb 5, 2014

Code:

//These are two checkboxes for a form.

<input type="checkbox" id="spw" name="spw" value="Single Property Website"  amount="25" onchange="sum_amount()" checked />
<label for="spw"> Single Property Website: $25<br></label>

<input type="checkbox" id="panoramas" name="panoramas" value="Panoramas / Virtual Tour Effect" amount="20" onchange="sum_amount(); return checkbox();" >
<label for="panoramas">Panoramas: $20<br></label>


//If the Panoramas checkbox gets checked, the SPW checkbox automatically gets checkmarked as well.

function checkbox()
	{
		if(document.getElementById("panoramas").checked==true)
		{
			
			document.getElementById("spw").checked=true;
			
		}
	}


//If the SPW checkbox is checked, the total_sum is 25. 
//If Panoramas is checked, total_sum is 20.
//If both are checked, total_sum is 45.

function sum_amount()
{
var total_sum=0;
if(document.getElementById("spw").checked==true)
			{
				total_sum+=25;
			}
if(document.getElementById("panoramas").checked==true)
			{
				total_sum+=20;
			}
}

The problem here is with total_sum and onchange and checkbox()

With both SPW and Panoramas checkmarked, the total_sum should be 45.

If I manually checkmark SPW, total_sum is 25
If I then checkmark Panoramas, total_sum is 45.

BUT IF..

Both boxes start off unchecked.
I checkmark Panoramas.
The checkbox() function will then automatically checkmark SPW.
So now both boxes are checked.
But the total_sum is 20, not 45.

If I toggle the SPW checkbox off and then back on, total_sum changes to the correct amount of 45.

Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?

beginner99 · Feb 5, 2014

First using inline javascript, meaning stuff like onchange="myFunction()" is bad practice and doing this in 2014 means you will need to refresh your knowledge.

http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice

fuzzybabybunny said:
Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?

The issue is very obvious. look at the order the functions are executed. If you don't get it with this hint, I suggest you search for a different career path.

You really couldn't try to get your point across with insulting him?

Try harder next time.

esquared
Anandtech Forum Director

BrightCandle · Feb 5, 2014

I can't find a problem (other than what beginner99 has said which is that this is very much the old style of JS).

The following example works exactly as its meant to - when panorama's is clicked SPW also gains a check mark if it doesn't have one. The functions get called in the debugger.

Here is the full example I made from your code, just save it as a html file:

Code:

<html>
<head>
<title>ATF problem</title>
</head>
<body>

<input type="checkbox" id="spw" name="spw" value="Single Property Website"  amount="25" onchange="sum_amount()" checked />
<label for="spw"> Single Property Website: $25<br></label>

<input type="checkbox" id="panoramas" name="panoramas" value="Panoramas / Virtual Tour Effect" amount="20" onchange="sum_amount(); return checkbox();" >
<label for="panoramas">Panoramas: $20<br></label>


<script>
//If the Panoramas checkbox gets checked, the SPW checkbox automatically gets checkmarked as well.

function checkbox()
	{
		if(document.getElementById("panoramas").checked==true)
		{
			
			document.getElementById("spw").checked=true;
			
		}
	}


//If the SPW checkbox is checked, the total_sum is 25. 
//If Panoramas is checked, total_sum is 20.
//If both are checked, total_sum is 45.

function sum_amount()
{
var total_sum=0;
if(document.getElementById("spw").checked==true)
			{
				total_sum+=25;
			}
if(document.getElementById("panoramas").checked==true)
			{
				total_sum+=20;
			}
}
</script>

</body>
</html>

Tweak155 · Feb 5, 2014

beginner99 said:
First using inline javascript, meaning stuff like onchange="myFunction()" is bad practice and doing this in 2014 means you will need to refresh your knowledge.

http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice

The issue is very obvious. look at the order the functions are executed. If you don't get it with this hint, I suggest you search for a different career path.

Wow prick. You clearly don't know FBB.

douglasb · Feb 5, 2014

Although I agree with the point about unobtrusive JavaScript, that was a pretty rude response. The OP understands the order that the functions are being called; his/her question was:

fuzzybabybunny said:
Why is it that when I use the checkbox() function to automatically checkmark SPW, the onchange event does not work and total_sum is not correct?

The answer is that the browser knows when an event is triggered by JavaScript (as opposed to being triggered by the user clicking on a control, for example), and it is ignoring it. Google "triggering JavaScript events manually" and you will get an idea of how to accomplish what you are trying to do.

Search

JS "onchange" does not seem to work...

fuzzybabybunny

Moderator<br>Digital & Video Cameras

beginner99

Diamond Member

BrightCandle

Diamond Member

Tweak155

Lifer

douglasb

Diamond Member

TRENDING THREADS