Form with two tabs and calculator

**LuigiX** · 09-13-2012 02:23 AM

Hi, I need a form with two tabs (US & Metric). Each form has two radio buttons, a picklist and two free text fields to hold numbers. And a 'calculate' button on each form. The calculation takes the option chosen in the radio button (male/female) and the option chosen in the picklist to apply a constant to the two numbers and produce a result eg

If option = 'male' and picklist = 'moderate' then constant = 5. If value a = 10 and value b = 2 then the calculation = 5 * 2 * 10/2 for a result of 50

Some error checking is necessary to check for valid numbers in the two free text fields and the range is valid ie between 5 and 50

Cheers, L

**JMRKER** · 09-13-2012 09:19 AM

Show what you have done so far so that we don't need to start from scratch.

**LuigiX** · 09-13-2012 03:22 PM

Hi, Apologies if I'm on the wrong site but I have nothing so far. This is beyond my javascript skills although if I had the basic stucture I'm sure I would be able to flesh it out. As an alternative I am happy to pay for this code so if you can point me at a good javascript programming resource I would be grateful

Cheers, L

**JMRKER** · 09-13-2012 03:28 PM

Do you know any HTML or CSS?

If yes, create the display you want to achieve with colors, positions, etc.
From that framework we can suggest various javascript solutions.

If you really want to pay someone for this exercise,
you can post to: http://www.webdeveloper.com/forum/fo...able-positions
but it should be a small coding effort depending upon your specific requirements.

**JMRKER** · 09-13-2012 03:49 PM

Do you know any HTML or CSS?

If yes, create the display you want to achieve with colors, positions, etc.
From that framework we can suggest various javascript solutions.

If you really want to pay someone for this exercise,
you can post to: http://www.webdeveloper.com/forum/fo...able-positions
but it should be a small coding effort depending upon your specific requirements.

If you want to try youself, see how close this NON-WORKING setup fulfills your needs.
If OK, then next step would be to add some WORKING javascirpt to perform the calculations.

Code:

<html>
<head>
<title> Tab Calculations </title>

<script type="text/javascript">

function highlight(currentdiv) {
  var tmp = 'T'+currentdiv.id.substring(1);  // alert(i+'\n'+tmp);
  var dtmp = '';
  var divs = document.getElementsByTagName("li");
  for (var i = 0; i < divs.length; i++) {
    if (divs[i].className == "mybox"){
      dtmp = 'T'+divs[i].id.substring(1);  // alert(i+'\n'+tmp);
      if (divs[i].id == currentdiv.id) {
        divs[i].style.backgroundColor = "#ccc";
        document.getElementById(tmp).style.display = 'block';
      } else {
        divs[i].style.backgroundColor = "#ffc";
        document.getElementById(dtmp).style.display = 'none';
      }
    }
  }
}
</script>

<style type="text/css">
 .mybox {
   display:block;
   background:#ffc;
   padding:5px;
   border:1px solid red;
   width:100px;
   cursor:pointer; 
 }
 .tMybox {
   display:none;
   border:1px solid blue;
   width:558px;
   height:233px;
 }
/* */ #tmenu li { float:left; } /* remove for vertical menu */
</style>
</head>

<body onload="highlight(document.getElementById('P1'))">

<div id="tmenu">
 <li id="P1" class="mybox" onClick="highlight(this)">USA</li>
 <li id="P2" class="mybox" onClick="highlight(this)">Metric</li>
</div>
<p style="clear:both">

<div>
 <div id="T1" class="tMybox"> <h2>USA Calculations</h2><p>
  <input type="radio" name="RBtn0" value="0">RBtn 1
  <input type="radio" name="RBtn0" value="1">RBtn 2
  <p>
  <select id="SBox0" name="SBox0">
   <option value="">Pick</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>
  <p>
  Entry #1: <input type="text" id="entry00" value=""><br>
  Entry #2: <input type="text" id="entry01" value="">
  <p>

 </div>

 <div id="T2" class="tMybox"> <h2>Metric Calculations</h2><p>
  <input type="radio" name="RBtn1" value="0">RBtn 1
  <input type="radio" name="RBtn1" value="1">RBtn 2
  <p>
  <select id="SBox1" name="SBox1">
   <option value="">Pick</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>
  <p>
  Entry #1: <input type="text" id="entry10" value=""><br>
  Entry #2: <input type="text" id="entry11" value="">
  <p>

 </div>

</div>
<button onclick="alert('Do some sort of calculations')">Calculate</button>
</body>
</html>

**LuigiX** · 09-13-2012 04:23 PM

Thanks for your quick reply. Yes I know enough HTML and CSS to be dangerous so should be able to add some functionality, although I want to hide the calculations from the user. Is this done in the CSS?

Cheers, L

**JMRKER** · 09-13-2012 08:14 PM

Hiding the calculations is not a problem.
Most of the actions don't need to be displayed, so probably will not need CSS for the calculation portion.

You will need to fill-in the labels and picks (etc.) in the script I provided unless you want to design something different.
You will also need to define what the calculation formulas are to be followed with what information.
Sort of what you did in your first post.

**LuigiX** · 09-16-2012 12:03 AM

Many thanks, for this. I've been trying to build 'function calculate()' for the button onclick="calculate() however not having much luck. I can get the following to work with the value of the text boxes but calling the radio button is proving a little difficult. Here is my pseudo code:

if RBtn0.value = 0 then 10 * SBox0.value + (entry00.value * entry01.value)
elseif RBtn0.value = 1 then 5 * SBox0.value + (entry00.value * entry01.value)

Much appreciated

Cheers, Luigi

**JMRKER** · 09-16-2012 08:47 AM

Show what calculations are required for each condition.
What does your HTML layout look like?

**LuigiX** · 09-16-2012 10:34 PM

Hi there, I've added the code I need to the calculate function to illustrate what I am trying to do. The calculation changes depending on which radio button is selected. But the problem is calling the radio button. I have got it working without the radio button

Also the code needs to cope with a user selecting the 'Metric' tab

Thanks for your help

Cheers, L

Code:

<html>
<head>
<title> Tab Calculations </title>

<script type="text/javascript">

function highlight(currentdiv) {
  var tmp = 'T'+currentdiv.id.substring(1);  // alert(i+'\n'+tmp);
  var dtmp = '';
  var divs = document.getElementsByTagName("li");
  for (var i = 0; i < divs.length; i++) {
    if (divs[i].className == "mybox"){
      dtmp = 'T'+divs[i].id.substring(1);  // alert(i+'\n'+tmp);
      if (divs[i].id == currentdiv.id) {
        divs[i].style.backgroundColor = "#ccc";
        document.getElementById(tmp).style.display = 'block';
      } else {
        divs[i].style.backgroundColor = "#ffc";
        document.getElementById(dtmp).style.display = 'none';
      }
    }
  }
}

function calculate()
{
var val1 = document.getElementById('entry00').value;     
var val2 = document.getElementById('entry01').value;      
var val3 = document.getElementById('SBox0').value;
var total = document.getElementById('Total');   


 for (i = 0; i < 2; i++)
 {
   if (document.RBtn0[i].checked == true)
     {
     total.value = 5 + (Number(val1) * Number(val2) * Number(val3));
     } 
   else
     {
     total.value = 10 + (Number(val1) * Number(val2) * Number(val3))
     }

 }

}

</script>

<style type="text/css">
 .mybox {
   display:block;
   background:#ffc;
   padding:5px;
   border:1px solid red;
   width:100px;
   cursor:pointer; 
 }
 .tMybox {
   display:none;
   border:1px solid blue;
   width:558px;
   height:233px;
 }
/* */ #tmenu li { float:left; } /* remove for vertical menu */
</style>
</head>

<body onload="highlight(document.getElementById('P1'))">

<div id="tmenu">
 <li id="P1" class="mybox" onClick="highlight(this)">USA</li>
 <li id="P2" class="mybox" onClick="highlight(this)">Metric</li>
</div>
<p style="clear:both">

<div>
 <div id="T1" class="tMybox"> <h2>USA Calculations</h2><p>
  <input type="radio" name="RBtn0" value="0" checked="checked" >RBtn 1
  <input type="radio" name="RBtn0" value="1">RBtn 2
  <p>
  <select id="SBox0" name="SBox0">
   <option value="">Pick</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>
  <p>
  Entry #1: <input type="text" id="entry00" value=""><br>
  Entry #2: <input type="text" id="entry01" value="">
  <p>

 </div>

 <div id="T2" class="tMybox"> <h2>Metric Calculations</h2><p>
  <input type="radio" name="RBtn1" value="0" checked="checked" >RBtn 1
  <input type="radio" name="RBtn1" value="1">RBtn 2
  <p>
  <select id="SBox1" name="SBox1">
   <option value="">Pick</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
  </select>
  <p>
  Entry #1: <input type="text" id="entry10" value=""><br>
  Entry #2: <input type="text" id="entry11" value="">
  <p>

 </div>

</div>

<button onclick="calculate()">Calculate</button>
<input type="text" id="Total" /> 
</body>
</html>

**xelawho** · 09-16-2012 10:44 PM

there are better ways to do this, but without messing with your html...

Code:

var btn=document.getElementsByName("RBtn0")[0]; //or it could be [1], depending on what you're doing... 
   if (btn.checked)
     {
     total.value = 5 + (Number(val1) * Number(val2) * Number(val3));
     } 
   else
     {
     total.value = 10 + (Number(val1) * Number(val2) * Number(val3))
     }

**LuigiX** · 09-17-2012 03:11 AM

You're a legend! Many thanks to you and the others who have stuck with me on this journey.

I would also like to hide the calculate function on another page and link to it from this page in order to hide the calculation from a 'view source'. Is this possible or practical?

Cheers, L

**JMRKER** · 09-17-2012 07:49 PM

Originally Posted by LuigiX

...
I would also like to hide the calculate function on another page and link to it from this page in order to hide the calculation from a 'view source'. Is this possible or practical?
...

What do you mean by 'hide the calculate function'?

Do you mean hide the code that does the calculation?

If yes, then forget it. You cannot hide JS code from view.

Thread: Form with two tabs and calculator

Thread Tools

Display

Form with two tabs and calculator

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions