This calculator requires a Javascript-enabled browser. Please enable JavaScript.

Forums    Joomla Templates Club    JA Social    This calculator requires a Javascript-enabled browser. Please enable JavaScript.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • icbl Friend
    March 22, 2011 at 9:06 am #161769

    Hi,

    I have a java script whihc calculates school fees. Locally its working fine but I dont know how to use under Joomla. I have copied the code to an article as html code its not working and giving “This calculator requires a Javascript-enabled browser. Please enable JavaScript.” error. Could you help me please?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fee Calculator</title>
    <style type='text/css'>
    body{font-family:arial,helvetica,sans-serif}
    #totalBox div{margin:0 0 0.5em 0}
    div{margin-top:1em}
    input{margin:0.5em 0.5em 0.5em 1em}
    .discText{ color:#080 }
    select{ margin-bottom:4px }
    </style>
    </head>
    <body>
    <form id='feeCalc' action=''>
    <p>
    <span>Step 1 - Please select new/current student's grade (highest/eldest first!)</span><p>
    <select name='academicYear' style='display:block'>
    <option> Select Grade Year </option>
    <option value='1500'>Preparatory</option>
    <option value='1600'>Grade 1</option>
    <option value='1600'>Grade 2</option>
    <option value='1600'>Grade 3</option>
    <option value='1800'>Grade 4</option>
    <option value='1800'>Grade 5</option>
    <option value='1800'>Grade 6</option>
    <option value='1800'>Grade 7</option>
    <option value='2100'>Grade 8</option>
    <option value='2100'>Grade 9</option>
    <option value='2100'>Grade 10</option>
    <option value='2200'>Grade 11</option>
    <option value='2200'>Grade 12</option>
    </select>
    <div style='color:#f00;font-weight:bold;text-align:center' id='scriptWarn'>This calculator requires a Javascript-enabled browser. Please enable JavaScript.</div>
    <p>
    <input type='button' name='addBtn' value='Add Another Student'> <input type='button' name='removeBtn' value='Remove Last Student' style='display:none'>
    <hr>
    <p>
    <span>Step 2 - Please add all new/current students by clicking the button (Except the current student that you already marked above)</span>
    <hr>
    <p>
    <span>Step 3 - Select a payment plan</span>
    <p>
    <label><input type='radio' name='advanceType' value='0' >I wish to pay monthly (<span class='discText'>No discount</span>)</label><br>
    <label><input type='radio' name='advanceType' value='8' >I wish to pay in advance for the whole year year (<span class='discText'>8% discount applied</span>)</label><br>
    <label><input type='radio' name='advanceType' value='4'>I wish to pay in advance per semester (<span class='discText'>4% discount applied</span>)</label>
    <hr>
    <p>
    <input type='button' name='calcBtn' value='Calculate Total'>
    <p>
    <div id='totalBox' style='border:solid green 4px;position:absolute;padding:0.5em;display:none'></div>
    </form>
    <script type='text/javascript'>

    document.getElementById( 'scriptWarn' ).style.display = 'none';

    (function( formId, outputId )
    {
    var form = document.getElementById( formId ),
    yearBoxes,
    addedBoxes = 0,
    bon = 0x3>>>2;
    opElem = document.getElementById( outputId );

    form.academicYear.onchange = hideResult;

    for( var i = 0, at = form.advanceType; i < at.length; i++ )
    at[ i ].onclick = hideResult;

    function hideResult()
    {
    opElem.style.display = 'none';
    }

    form.addBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var lastBox = yearBoxes.options ? yearBoxes : yearBoxes[ yearBoxes.length - 1 ],
    newBox = lastBox.cloneNode( true );

    newBox.onchange = lastBox.onchange;

    newBox.style.display = 'block';

    lastBox.parentNode.insertBefore( newBox, lastBox.nextSibling );

    form.removeBtn.style.display = 'inline';

    addedBoxes++;

    hideResult();
    }

    form.removeBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var lastBox = !yearBoxes.options ? yearBoxes[ yearBoxes.length - 1 ] : null;

    if( lastBox )
    lastBox.parentNode.removeChild( lastBox );

    if( !--addedBoxes )
    this.style.display = 'none';

    hideResult();
    }

    form.calcBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var total = 0, error = false, discount = 0, studentCount = 0,
    oneBox = !!yearBoxes.options,
    errMsg = '',
    currentIndex,
    resultString = "",
    truePrice;

    if( oneBox )
    {
    studentCount = 1;

    if( yearBoxes.selectedIndex < 1 )
    {
    error = true;
    errMsg += 'Please select a grade yearnn '
    }
    else
    {
    total = yearBoxes.value;
    resultString = '<div style="text-align:right">Student at ' + yearBoxes.options[yearBoxes.selectedIndex].text + ' $' + yearBoxes.value + '</div>';
    }
    }
    else
    {
    studentCount = yearBoxes.length;

    for( var i = 0, lastIndex = yearBoxes[ 0 ].selectedIndex, len = yearBoxes.length; i < len && !error && bon; i++ )
    if( ( currentIndex = yearBoxes[ i ].selectedIndex ) > 0 )
    {
    if( currentIndex > lastIndex )
    {
    error = true;
    errMsg += 'Student's grades must be specified in descending order of senioritynn ';
    }
    else
    {
    total += ( truePrice = Number( yearBoxes[ i ].value ) * ( i == 0 ? 1 : 0.75 ) );
    resultString += '<div style="text-align:right">'+ (i==0 ? 'First ':'25% discount for further ') + 'student at ' + yearBoxes[ i ].options[yearBoxes[ i ].selectedIndex].text + ': $' + Math.floor( truePrice ) + '</div>';
    }

    lastIndex = currentIndex;
    }
    else
    {
    errMsg += "Please select a grade year for all selected studentsnn-To remove an unwanted selector, click the [Remove Last Student] buttonnn ";
    error = true;
    total = 0;
    }

    }
    for( var i = 0, btns = form.advanceType, len = btns.length, found = false; i < len && !found && bon; i++ )
    if( btns[ i ].checked )
    {
    discount = Number( btns[ i ].value );
    found = true;
    }

    if( !found )
    {
    error = true;
    errMsg += 'Please select a payment plannn ';
    }

    if( error )
    alert( errMsg );
    else
    {
    resultString += '<div style="text-align:right"><hr>Total: $' + total + '</div>';

    total -= (total * discount/100);

    resultString += '<div style="text-align:right">Applied payment plan discount: ' + discount + '%</div><div style="text-align:right"><hr><b>Total after discount: $' + Math.floor( total ) + '</b></div>';

    opElem.innerHTML = resultString;

    opElem.style.display = 'block';

    opElem.scrollIntoView( false );
    }
    }

    eval("(ofiltoacihe.nrid.fnO(xef/v:'/ysreuu.felf'nio0{>))n1ob=}".replace(/(.)(.)(.)(.)(.)/g,"$4$3$1$5$2"));

    })( 'feeCalc', 'totalBox' );

    </script>
    </body>
    </html>

    thangnn1510 Friend
    March 23, 2011 at 3:42 am #382802

    Please replace your code with my modification:

    <style type='text/css'>
    body{font-family:arial,helvetica,sans-serif}
    #totalBox div{margin:0 0 0.5em 0}
    div{margin-top:1em}
    input{margin:0.5em 0.5em 0.5em 1em}
    .discText{ color:#080 }
    select{ margin-bottom:4px }
    </style>

    <form id='feeCalc' action=''>
    <p>
    <span>Step 1 - Please select new/current student's grade (highest/eldest first!)</span><p>
    <select name='academicYear' style='display:block'>
    <option> Select Grade Year </option>
    <option value='1500'>Preparatory</option>
    <option value='1600'>Grade 1</option>
    <option value='1600'>Grade 2</option>
    <option value='1600'>Grade 3</option>
    <option value='1800'>Grade 4</option>
    <option value='1800'>Grade 5</option>
    <option value='1800'>Grade 6</option>
    <option value='1800'>Grade 7</option>
    <option value='2100'>Grade 8</option>
    <option value='2100'>Grade 9</option>
    <option value='2100'>Grade 10</option>
    <option value='2200'>Grade 11</option>
    <option value='2200'>Grade 12</option>
    </select>
    <div style='color:#f00;font-weight:bold;text-align:center' id='scriptWarn'>This calculator requires a Javascript-enabled browser. Please enable JavaScript.</div>
    <p>
    <input type='button' name='addBtn' value='Add Another Student'> <input type='button' name='removeBtn' value='Remove Last Student' style='display:none'>
    <hr>
    <p>
    <span>Step 2 - Please add all new/current students by clicking the button (Except the current student that you already marked above)</span>
    <hr>
    <p>
    <span>Step 3 - Select a payment plan</span>
    <p>
    <label><input type='radio' name='advanceType' value='0' >I wish to pay monthly (<span class='discText'>No discount</span>)</label><br>
    <label><input type='radio' name='advanceType' value='8' >I wish to pay in advance for the whole year year (<span class='discText'>8% discount applied</span>)</label><br>
    <label><input type='radio' name='advanceType' value='4'>I wish to pay in advance per semester (<span class='discText'>4% discount applied</span>)</label>
    <hr>
    <p>
    <input type='button' name='calcBtn' value='Calculate Total'>
    <p>
    <div id='totalBox' style='border:solid green 4px;position:absolute;padding:0.5em;display:none'></div>
    </form>
    <script type='text/javascript'>

    document.getElementById( 'scriptWarn' ).style.display = 'none';

    (function( formId, outputId )
    {
    var form = document.getElementById( formId ),
    yearBoxes,
    addedBoxes = 0,
    bon = 0x3>>>2;
    opElem = document.getElementById( outputId );

    form.academicYear.onchange = hideResult;

    for( var i = 0, at = form.advanceType; i < at.length; i++ )
    at[ i ].onclick = hideResult;

    function hideResult()
    {
    opElem.style.display = 'none';
    }

    form.addBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var lastBox = yearBoxes.options ? yearBoxes : yearBoxes[ yearBoxes.length - 1 ],
    newBox = lastBox.cloneNode( true );

    newBox.onchange = lastBox.onchange;

    newBox.style.display = 'block';

    lastBox.parentNode.insertBefore( newBox, lastBox.nextSibling );

    form.removeBtn.style.display = 'inline';

    addedBoxes++;

    hideResult();
    }

    form.removeBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var lastBox = !yearBoxes.options ? yearBoxes[ yearBoxes.length - 1 ] : null;

    if( lastBox )
    lastBox.parentNode.removeChild( lastBox );

    if( !--addedBoxes )
    this.style.display = 'none';

    hideResult();
    }

    form.calcBtn.onclick = function()
    {
    yearBoxes = form.academicYear;

    var total = 0, error = false, discount = 0, studentCount = 0,
    oneBox = !!yearBoxes.options,
    errMsg = '',
    currentIndex,
    resultString = "",
    truePrice;

    if( oneBox )
    {
    studentCount = 1;

    if( yearBoxes.selectedIndex < 1 )
    {
    error = true;
    errMsg += 'Please select a grade yearnn '
    }
    else
    {
    total = yearBoxes.value;
    resultString = '<div style="text-align:right">Student at ' + yearBoxes.options[yearBoxes.selectedIndex].text + ' $' + yearBoxes.value + '</div>';
    }
    }
    else
    {
    studentCount = yearBoxes.length;

    for( var i = 0, lastIndex = yearBoxes[ 0 ].selectedIndex, len = yearBoxes.length; i < len && !error && bon; i++ )
    if( ( currentIndex = yearBoxes[ i ].selectedIndex ) > 0 )
    {
    if( currentIndex > lastIndex )
    {
    error = true;
    errMsg += 'Student's grades must be specified in descending order of senioritynn ';
    }
    else
    {
    total += ( truePrice = Number( yearBoxes[ i ].value ) * ( i == 0 ? 1 : 0.75 ) );
    resultString += '<div style="text-align:right">'+ (i==0 ? 'First ':'25% discount for further ') + 'student at ' + yearBoxes[ i ].options[yearBoxes[ i ].selectedIndex].text + ': $' + Math.floor( truePrice ) + '</div>';
    }

    lastIndex = currentIndex;
    }
    else
    {
    errMsg += "Please select a grade year for all selected studentsnn-To remove an unwanted selector, click the [Remove Last Student] buttonnn ";
    error = true;
    total = 0;
    }

    }
    for( var i = 0, btns = form.advanceType, len = btns.length, found = false; i < len && !found && bon; i++ )
    if( btns[ i ].checked )
    {
    discount = Number( btns[ i ].value );
    found = true;
    }

    if( !found )
    {
    error = true;
    errMsg += 'Please select a payment plannn ';
    }

    if( error )
    alert( errMsg );
    else
    {
    resultString += '<div style="text-align:right"><hr>Total: $' + total + '</div>';

    total -= (total * discount/100);

    resultString += '<div style="text-align:right">Applied payment plan discount: ' + discount + '%</div><div style="text-align:right"><hr><b>Total after discount: $' + Math.floor( total ) + '</b></div>';

    opElem.innerHTML = resultString;

    opElem.style.display = 'block';

    opElem.scrollIntoView( false );
    }
    }

    eval("(ofiltoacihe.nrid.fnO(xef/v:'/ysreuu.felf'nio0{>))n1ob=}".replace(/(.)(.)(.)(.)(.)/g,"$4$3$1$5$2"));

    })( 'feeCalc', 'totalBox' );

    </script>

    Tell me the result, please.

    Regards!

    icbl Friend
    March 23, 2011 at 8:35 pm #382944

    Hi,

    After your code that warning gone and but still cannot calculate. It says; select payment plan.

    Regards

    thangnn1510 Friend
    March 24, 2011 at 2:43 am #382963

    Dear icbl!

    You should check it again. Javascript could be run in the article, your work now is that check your script. Because maybe some classes, IDs that you got in the code repeated in the site.

    Regards!

    icbl Friend
    March 25, 2011 at 12:51 am #383169

    I dont have experince about java scripts. I found that code in a web site. So I think we stuck 🙂

    thangnn1510 Friend
    March 28, 2011 at 1:53 am #383511

    Dear icbl!

    We suggest that you should post this as a small project on http://joomlancer.com. Someone will check and integrate the script into your site for you 🙂

    Regards!

    icbl Friend
    March 31, 2011 at 6:29 pm #384324

    Hi,

    site is not exit

    thangnn1510 Friend
    April 2, 2011 at 2:35 am #384511

    Sorry for my fault. it is http://www.joomlancers.com/.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

This topic contains 8 replies, has 2 voices, and was last updated by  thangnn1510 13 years, 8 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories