Results 1 to 6 of 6

Thread: What's wrong with my onChange function?

  1. #1
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default What's wrong with my onChange function?

    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


    Thanks

    Code:
    <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>

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Change onChange to onchange.
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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();"
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    <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>

  5. #5
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I found the main problem. The line:
    sixthValue = Number(document.earningsform.sixth.value);

    This input field doesn't currently exist.

  6. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •