www.webdeveloper.com
Results 1 to 13 of 13

Thread: Form with two tabs and calculator

  1. #1
    Join Date
    Oct 2003
    Posts
    108

    Form with two tabs and calculator

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Show what you have done so far so that we don't need to start from scratch.

  3. #3
    Join Date
    Oct 2003
    Posts
    108
    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

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    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.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    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>
    Last edited by JMRKER; 09-13-2012 at 03:50 PM. Reason: Forgot example code.

  6. #6
    Join Date
    Oct 2003
    Posts
    108
    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

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    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.

  8. #8
    Join Date
    Oct 2003
    Posts
    108
    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

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Show what calculations are required for each condition.
    What does your HTML layout look like?

  10. #10
    Join Date
    Oct 2003
    Posts
    108
    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>

  11. #11
    Join Date
    Nov 2010
    Posts
    1,050
    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))
         }

  12. #12
    Join Date
    Oct 2003
    Posts
    108
    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

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    Quote Originally Posted by LuigiX View Post
    ...
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles