• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 304
  • Last Modified:

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

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

0
teomcam
Asked:
teomcam
  • 2
1 Solution
 
activematxCommented:
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

0
 
teomcamAuthor Commented:
Hi @activematx,

How I am gonna use that. Should I put in an article as html? I have no idea about the second part (form) Where I should paste this?

Kind regards
0
 
teomcamAuthor Commented:
No solution.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now