Log in

View Full Version : What's wrong with my onChange function?


smudly
04-08-2011, 09:03 PM
This is a calculator that calculates how much a user can earn from their referrals depending on the user's Level & Member type. It's supposed to be updating live (onChange) when the user types in new values in the fields, but nothing is happening. Any idea where I went wrong?

View the page HERE (http://sheetmusichaven.com/admin/mysites/xphits/referralcalculator.php)


Thanks


<html>
<head>
<script type="text/javascript">

function calculate()
{
// eval makes the script know the value is a number, and not text

var myLevel = eval(document.earningsform.level.value);
var memberType = eval(document.earningsform.type.value);
var viewed = eval(document.earningsform.viewed.value);
var Clix = eval(document.earningsform.clix.value);
var firstValue = eval(document.earningsform.first.value);
var secondValue = eval(document.earningsform.second.value);
var thirdValue = eval(document.earningsform.third.value);
var fourthValue = eval(document.earningsform.fourth.value);
var fifthValue = eval(document.earningsform.fifth.value);
var sixthValue = eval(document.earningsform.sixth.value);

var totalViewed = (viewed + Clix);

// If Upgraded
if(memberType==01){

var firstLevel = eval(.15);
var secondLevel = eval(.10);
var thirdLevel = eval(.5);
var fourthLevel = eval(.3);
var fifthLevel = eval(.2);
var sixthLevel = eval(.1);


var startRate = eval(.50);
var rateIncrease = eval(.01);
var rate = startRate + (myLevel * rateIncrease);

var firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// var firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// var firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// var firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// var firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// var firstEarnings = rate * firstLevel * (firstValue * totalViewed);

document.getElementById("firstcalculate").innerHTML=firstEarnings;


}
// If Free
else{

var firstLevel = eval(.10);
var secondLevel = eval(.5);
var thirdLevel = eval(.3);
var fourthLevel = eval(.2);
var fifthLevel = eval(.1);

var startRate = eval(.50);
var rateIncrease = eval(.005);
var rate = startRate + (myLevel * rateIncrease);

}

// This will type in the value of myLevel into the fifth field
// document.earningsform.fifth.value = myLevel

}
</script>
</head>
<body>

<table align="center" cellspacing="0" cellpadding="5">
<form action="referralcalculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10" onChange="calculate()"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type" onChange="calculate()">
<option value="01" selected="selected">Upgraded</option>
<option value="02">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">Viewed by each Referral: </td><td><input type="text" name="viewed" value="100" size="10" onChange="calculate()"></td><td>(Daily)</td>
</tr>
<tr>
<td align="center">Clix by each Referral: </td><td><input type="text" name="clix" value="100" size="10" onChange="calculate()"></td><td>(Daily)</td>
</tr>
<tr>
<td align="center"><u><b>Referrals:</b></u> </td><td></td><td><u><b>Earned</b></u></td>
</tr>
<tr>
<td align="center">1st Level: </td><td><input type="text" name="first" size="10" value="5" onChange="calculate()"></td><td><p id="firstcalculate">37.5</p></td>
</tr>
<tr>
<td align="center">2nd Level: </td><td><input type="text" name="second" size="10" value="5" onChange="calculate()"></td><td>18.75</td>
</tr>
<tr>
<td align="center">3rd Level: </td><td><input type="text" name="third" size="10" value="5" onChange="calculate()"></td><td>11.25</td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5" onChange="calculate()"></td><td>7.5</td>
</tr>
<tr>
<td align="center">5th Level: </td><td><input type="text" name="fifth" size="10" value="5" onChange="calculate()"></td><td>3.75</td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" name="submit" value="Calculate"><input type="reset" name="reset" value="Reset"></td>
</tr>


</form>
</table>

</body>
</html>
Nile
04-08-2011, 09:34 PM
Change onChange to onchange.
djr33
04-08-2011, 09:41 PM
First, add this line: alert('TEST'); to the beginning of the calculate() function. For example, right after the //eval... comment. Then try your page again. If you change an input, there should be a popup window. If so, then the onchange event is fine and the function isn't working properly. If not, then the onchange event is not occurring.


Nile is correct that technically onchange is proper. But I don't know if this actually changes the behavior. If you are using XHTML, capitalization matters so onChange is not valid. But as far as I know, it still works. One thing you can do to standardize your page is add a doc type. If that doc type happens to be HTML, then be sure to use all lowercase.

Nile, do you think this actually changes the behavior? (I'm not saying you're wrong, I just don't remember this being a problem.)


Finally, most browsers will fix this for you, but your code is technically invalid. All operations must end in a semicolon in Javascript, even in an onchange attribute.

So here's what it should look like in the end:
onchange="calculate();"
smudly
04-08-2011, 10:02 PM
Thanks for that good information. It helped a lot. Upon testing the Alert, it did in fact popup when clicking on the text fields. I tested this after changing the textfield's onChange all to onKeyUp.

Here is my new code, the values still won't update properly.

I'll keep looking into it.

Thanks


<html>
<head>
<script type="text/javascript">

function calculate()
{
// Number makes the script know the value is a number, and not text
//alert('TEST');
myLevel = Number(document.earningsform.level.value);
memberType = Number(document.earningsform.type.value);
viewed = Number(document.earningsform.viewed.value);
Clix = Number(document.earningsform.clix.value);
firstValue = Number(document.earningsform.first.value);
secondValue = Number(document.earningsform.second.value);
thirdValue = Number(document.earningsform.third.value);
fourthValue = Number(document.earningsform.fourth.value);
fifthValue = Number(document.earningsform.fifth.value);
sixthValue = Number(document.earningsform.sixth.value);

totalViewed = (viewed + Clix);

// If Upgraded
if(memberType==01){

firstLevel = Number(.15);
secondLevel = Number(.10);
thirdLevel = Number(.5);
fourthLevel = Number(.3);
fifthLevel = Number(.2);
sixthLevel = Number(.1);


startRate = Number(.50);
rateIncrease = Number(.01);
rate = startRate + (myLevel * rateIncrease);

firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// firstEarnings = rate * firstLevel * (firstValue * totalViewed);
// firstEarnings = rate * firstLevel * (firstValue * totalViewed);

document.getElementById("firstcalculate").innerHTML=firstEarnings;


}
// If Free
else{

firstLevel = Number(.10);
secondLevel = Number(.5);
thirdLevel = Number(.3);
fourthLevel = Number(.2);
fifthLevel = Number(.1);

startRate = Number(.50);
rateIncrease = Number(.005);
rate = startRate + (myLevel * rateIncrease);

}

// This will type in the value of myLevel into the fifth field
// document.earningsform.fifth.value = myLevel

}
</script>
</head>
<body>

<table align="center" cellspacing="0" cellpadding="5">
<form action="referralcalculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10" onKeyUp="calculate();"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type" onChange="calculate();">
<option value="01" selected="selected">Upgraded</option>
<option value="02">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">Viewed by each Referral: </td><td><input type="text" name="viewed" value="100" size="10" onKeyUp="calculate();"></td><td>(Daily)</td>
</tr>
<tr>
<td align="center">Clix by each Referral: </td><td><input type="text" name="clix" value="100" size="10" onKeyUp="calculate();"></td><td>(Daily)</td>
</tr>
<tr>
<td align="center"><u><b>Referrals:</b></u> </td><td></td><td><u><b>Earned</b></u></td>
</tr>
<tr>
<td align="center">1st Level: </td><td><input type="text" name="first" size="10" value="5" onKeyUp="calculate();"></td><td><p id="firstcalculate">37.5</p></td>
</tr>
<tr>
<td align="center">2nd Level: </td><td><input type="text" name="second" size="10" value="5" onKeyUp="calculate();"></td><td>18.75</td>
</tr>
<tr>
<td align="center">3rd Level: </td><td><input type="text" name="third" size="10" value="5" onKeyUp="calculate();"></td><td>11.25</td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5" onKeyUp="calculate();"></td><td>7.5</td>
</tr>
<tr>
<td align="center">5th Level: </td><td><input type="text" name="fifth" size="10" value="5" onKeyUp="calculate();"></td><td>3.75</td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" name="submit" value="Calculate"><input type="reset" name="reset" value="Reset"></td>
</tr>


</form>
</table>

</body>
</html>
smudly
04-08-2011, 10:10 PM
I found the main problem. The line:
sixthValue = Number(document.earningsform.sixth.value);

This input field doesn't currently exist.
Nile
04-08-2011, 10:15 PM
document.earningsform.sixth is undefined
sixthValue = Number(document.earningsform.sixth.value); (line 18)
So make it exist? What's it supposed to be?

@djr, I know it will if it's inside actual javascript

(e.g., <script> window.onClick = function() {}; </scirpt>)

- but I don't think it will just inside the html.