We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

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

teomcam
teomcam asked
on
Medium Priority
339 Views
Last Modified: 2012-05-11
Hi,

I have a java script which 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[type=radio]{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 [Add Another Student] 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 year\n\n '
   }
   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 seniority\n\n ';
     }
     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 students\n\n-To remove an unwanted selector, click the [Remove Last Student] button\n\n ";  
      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 plan\n\n ';
  }
   
  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>

Open in new window

Comment
Watch Question

Looks like there is a some java script and a form.  The form is missing the "action" url as well.

This is the java script
<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 year\n\n '
   }
   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 seniority\n\n ';
     }
     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 students\n\n-To remove an unwanted selector, click the [Remove Last Student] button\n\n ";  
      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 plan\n\n ';
  }
   
  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>

Open in new window



This is the form

<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 [Add Another Student] 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>

Open in new window

Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
No solution.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.