www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help! Trying to do text input & radio box to auto calculate

  1. #1
    Join Date
    Jun 2012
    Posts
    6

    Help! Trying to do text input & radio box to auto calculate

    So basicly Im trying to have a textfield work as the amount of files... Than have 2 radial buttons one for .80 and one for 1.20

    Once you fill in textfield with a number than clicka radial it will mutiple and give you a price in a textfield. This is what I have so far.

    <script type="text/javascript"><!--
    function compute()
    {
    var num1 = parseInt(document.myform.input1.value) * 0.80;
    var num2 = parseInt(document.myform.input2.value) * 1.20;
    var computation = num1 + num2;
    document.myform.amount.value = computation;
    if (document.myform.amount.value == 'NaN')
    {
    document.myform.amount.value = '';
    alert('Please key in a number');
    }
    }
    // --></script>

    <table>
    <tr><td valign="top">Number of files </td><td><p>
    <input value="" type="Text">
    <br> </p><div class="fieldclear"></div></td></tr>
    <tr><td valign="top">Professional $0.80</td><td>
    <input name="input1" id="input" value="input" type="radio"></td></tr>
    <tr><td valign="top">Premium $1.20</td><td>
    <input name="input2" id="input" value="input" type="radio">
    </td></tr>
    <tr><td valign="top">Total Cost</td><td>
    <input name="amount" disabled="disabled" type="text">
    </tr></table>

    Can anyone help?

  2. #2
    Join Date
    Mar 2012
    Posts
    202
    I'm pretty sure this is what you're looking for? I didn't clean the code or anything, just simple modifications:

    HTML Code:
    <script type="text/javascript"><!--
    function compute()
    {
    var mult = 1;
    if(document.getElementById("chkbx1").checked) mult = 0.8;
    if(document.getElementById("chkbx2").checked) mult = 1.2;
    if(document.getElementById("textinput").value*0 != 0) document.getElementById("textoutput").value = "Numbers ONLY!";
    else document.getElementById("textoutput").value = document.getElementById("textinput").value*mult;
    }
    // --></script>
    
    <table>
    <tr><td valign="top">Number of files </td><td><p>
    <input value="" type="Text" id="textinput" onkeyup="compute()">
    <br> </p><div class="fieldclear"></div></td></tr>
    <tr><td valign="top">Professional $0.80</td><td>
    <input name="chkbxgroup1" id="chkbx1" type="radio" onclick="compute()" checked></td></tr>
    <tr><td valign="top">Premium $1.20</td><td>
    <input name="chkbxgroup1" id="chkbx2" type="radio" onclick="compute()">
    </td></tr>
    <tr><td valign="top">Total Cost</td><td>
    <input name="amount" disabled="disabled" type="text" id="textoutput">
    </tr></table>
    Last edited by Gray1989; 06-29-2012 at 01:18 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb

    Several questions about your code.
    1. If the elements of #1 are the radio buttons values, why compute with both and not one or the other?
    2. Not sure of the purpose of element with 'fieldclear'

    Observation: You are missing a <td>...</td> around the name="amount" element.

    Here is my SWAG as to what it is that you are trying to accomplish.
    Code:
    <html>
    <head>
    <title>Compute</title>
    
    <script type="text/javascript">
    function compute() {
      var num1 = document.getElementById('NOF').value
      if (num1 == '') { alert('Missing file value'); return; }
      var num2 = getRBtnName('rBtn');
      if (num2 == '') { alert('Missing selection'); return; }
      var computation = (num1 * num2).toFixed(2);
    
      document.myform.amount.value = computation;
      if (document.myform.amount.value == 'NaN') {
        document.myform.amount.value = '';
        alert('Please key in a number');
      }
    }
    
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    </script>
    
    </head>
    <body>
    <form name="myform" action="" method="post" onsubmit="return false")>
    <table border="1">
    
    <tr>
     <td valign="top">Number of files </td>
     <td>
      <p><input id="NOF" value="" type="text" onblur="compute()">
      <br> </p>
      <div class="fieldclear"></div>
     </td>
    </tr>
    
    <tr>
     <td valign="top">Professional $0.80</td>
     <td> <input name="rBtn" value="0.80" type="radio" checked onclick="compute()"> </td>
    </tr>
    
    <tr>
     <td valign="top">Premium $1.20</td>
     <td> <input name="rBtn" value="1.20" type="radio" onclick="compute()"> </td>
    </tr>
    
    <tr>
     <td valign="top">Total Cost $</td>
     <td> <input name="amount" disabled="disabled" type="text"> </td>
    </tr>
    
    </table>
    </form>
    </body>
    </html>
    Besure to put you code between [ code] and [ /code] tags (without the spaces)
    to make your script stand out for other forum readers.

    Sorry for the post. Looks like 'Gray1989' types faster than me.

  4. #4
    Join Date
    Jun 2012
    Posts
    6
    Wohoo thanks it works! Last problem im having is when I setup that to work with paypal and i use the paypal code that shows email in the code I get javascript error because of spam or something???

  5. #5
    Join Date
    Mar 2012
    Posts
    202
    I haven't worked with paypal before but there shouldn't be much of a problem there.. Could you maybe explain the problem more specifically? Like what type of error are you getting and where in the code is the error originating from? If you could provide a copy & paste of the faulty portion of the code that would be great..

Thread Information

Users Browsing this Thread

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

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