We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 27763
    • 29 Posts
    Hi,
    I want to develop a few calulators on my Modx site.

    For example -
    - Home Loan Calculator
    - Income Tax Calculator
    - Compound Interest Calculator

    Im pretty good with HTML/CSS but only have entry level PHP knowledge.

    I want to use AJAX so that the page doesnt have to be refreshed on the calculations.

    Question - Where do I start? How does Modx work with Ajax? Can I just follow online tutorials or will they have to be ModX specific?

    The only thing I can find on Ajax and Modx is the Ajax wiki page which just confuses me.

    Any guidance for a beginner is much appreciated.

    Mitch
      • 6228
      • 249 Posts
      You do realize that you can find pre-made 3rd party ’widgets’ that perform those calculations? Find the one you want, download, and paste onto a webpage. Many of them are free and require nothing but a javascript-enabled browser (no php/ajax programming).

      Do a Google search for the type of calculator and add ’widget’ to the search terms.
        lo9on.com

        MODx Evolution/Revolution | Remote Desktop Training | Development
        • 27763
        • 29 Posts
        I managed to write one. I found a few tutorials on Jquery and they worked fine as a snippet in Modx

        Hows this for a first effort - http://tinyurl.com/2c9l5u9

        Thanks,
        Smitch

        <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js'></script>
        <form id="form5">
         
        <p>  
        <label style="width:100px;">Your Income:</label> 
        <input type="text" name="mcIncome" id="mcIncome" class="dollar" /> 
        <button id="calc" onclick="return false">Calculate Income Tax</button> 
        </p> 
        
        
        <hr style="width:95%; height:1px; color:#999999;">
        
        <div id="answer" style="display:none">
        
        <p align=center>
        Your Income Tax:<br/>
        <input type="text" name="mcPayment" id="mcPayment" class="dollar" /> 
        </p>
        
        <hr style="width:95%; height:1px; color:#999999;">
        
        <p style="margin-left:50px;"><strong>2009 / 2010 Financial year tax rates.</strong></p>
        <table border="1" class="taxcalc" cellpadding=5>
          <tbody>
            <tr>
              <td valign="top" width="160"><p><em>Taxable income</em></p></td>
              <td valign="top" width="300"><p><em>Tax on this income</em></p></td>
            </tr>
            <tr id="1">
              <td valign="top" width="160"><p>$1 – $6,000</p></td>
              <td valign="top" width="300"><p>Nil</p></td>
            </tr>
            <tr id="2">
              <td valign="top" width="160"><p>$6,001 – $35,000</p></td>
              <td valign="top" width="300"><p>15c for each $1 over $6,000</p></td>
            </tr>
            <tr id="3">
              <td valign="top" width="160"><p>$35,001 – $80,000</p></td>
              <td valign="top" width="300"><p>$4,350 plus 30c for each $1 over $35,000</p></td>
            </tr>
            <tr id="4">
              <td valign="top" width="160"><p>$80,001 – $180,000</p></td>
              <td valign="top" width="300"><p>$17,850 plus 38c for each $1 over $80,000</p></td>
            </tr>
            <tr id="5">
              <td valign="top" width="160"><p>$180,001 and over</p></td>
              <td valign="top" width="300"><p>$55,850 plus 45c for each $1 over $180,000</p></td>
            </tr>
          </tbody>
        </table>
        
        <p style="margin-left:50px; font-size:10px; color:#666666;">
        Source: <a href="http://www.ato.gov.au/individuals/content.asp?doc=/content/12333.htm" target="_blank" style="font-size:10px; color:#999999;">Australia Tax Office website</a>
        </p>
        </div>
        
        </form> 
        
        <script type="text/javascript">
        function CurrencyFormatted(num) {
        num = num.toString().replace(/\$|\,/g,'');
        if(isNaN(num))
        num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num*100+0.50000000001);
        cents = num%100;
        num = Math.floor(num/100).toString();
        if(cents<10)
        cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
        num = num.substring(0,num.length-(4*i+3))+','+
        num.substring(num.length-(4*i+3));
        return (((sign)?'':'-') + '$' + num + '.' + cents);
        }
         
        $("#calc").click(function(){ 
        var I, T; 
        
        //close answer DIV
        $("#answer").slideUp('slow');
        
        //reset the tax table background
        $("#1").removeClass("bracket");
        $("#2").removeClass("bracket");
        $("#3").removeClass("bracket");
        $("#4").removeClass("bracket");
        $("#5").removeClass("bracket");
        
        //get the income from form
        I = parseInt($("#mcIncome").val()); 
        
        //$1 – $6,000  Nil
        //$6,001 – $35,000  15c for each $1 over $6,000
        //$35,001 – $80,000 $4,350 plus 30c for each $1 over $35,000
        //$80,001 – $180,000 $17,850 plus 38c for each $1 over $80,000
        //$180,001 and over  $55,850 plus 45c for each $1 over $180,000
        
        //calculate tax on income
        if (I <6001) { T = 0;  $("#1").addClass("bracket");}
        if (I < 35001 && I > 6000) { T = ((I-3500)*0.3); $("#2").addClass("bracket");}
        if (I < 80001 && I > 35000) { T = 4350 + ((I-3500)*0.3); $("#3").addClass("bracket");}
        if (I < 180001 && I > 80000) { T = 17850 + ((I-80000)*0.38); $("#4").addClass("bracket");}
        if (I > 180000) { T = 55850 + ((I-180000)*0.45); $("#5").addClass("bracket");}
        
        //write calculation to form
        if(!isNaN(T))
        {      
             var result = CurrencyFormatted(T);
             $("#mcPayment").val(result); 
        } 
        else 
        {
             $("#mcPayment").val('Please enter a number');
        } 
        
        //open answer DIV
        $("#answer").slideToggle('40000');
        
        return false; 
        }); 
        </script>