469,898 Members | 1,733 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

Why does form calculation work with text but not with select fields?

I'm using an order form where clients may update quantity in a text field.

To make it more customers friendly, I would like to have the field with the select format.

But doing so in the form, the javascript is not doing anymore.

Can anyone have a look and let me know what to change in the script to have it working with select fields in place of the text fields?

Thank you

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>My Untitled Document</title>
  4. <script type="text/javascript" language="javascript">
  5. <!--
  6. function calcVals() {
  7.     var form = document.form1;
  8.     var total = document.getElementById("valTotal");
  9.     var currentTotal = total.value.replace('$','');
  10.      // document.pgCartOrder.calculatedTotal.value='0';
  11.     var tempTotal = 0;
  12.     var totalFields = eval(form.elements.length-1);
  13.     //alert (totalFields);
  14.       for (i=0; i < totalFields; i++) {
  15.         if(form.elements[i].type == 'submit'){
  16.         }else if(form.elements[i].type == 'text'){
  17.             if(form.elements[i].value > 0){  
  18.                 tempTotal = tempTotal + parseFloat(form.elements[i].title * parseInt(form.elements[i].value));
  19.             }else if(form.elements[i].value = 'NaN'){
  20.                 form.elements[i].value = "";
  21.             }
  22.         }
  23.       }
  24.  
  25.     if (String(total) != 'NaN') {
  26.         form.valTotal.value = "$"+ tempTotal;
  27.     } else {
  28.         form.valTotal.value = 'ERROR';
  29.     }
  30. }
  31. form.valTotal.value = round(form.valTotal.value, 2);
  32. -->
  33. </script>
  34.  
  35.  
  36. </head>
  37.  
  38. <body onload="calcVals()">
  39.  <? if ($_POST['send']){ ?>
  40.     <? echo floor($_POST['textfield']) ;?>
  41.     <? echo "<br>";?>
  42.     <? echo floor($_POST['textfield1']) ;?>
  43.     <? echo "<br>";?>
  44.     <? echo floor($_POST['textfield2']) ;?>
  45.     <? echo "<br>";?>
  46.  
  47. <? } ?>
  48.  
  49. <form id="form1" name="form1" method="post" action="" >
  50.   $ 9.25<input type="text" name="textfield" value="1"  title="9.25" onkeyup="calcVals();"/><br/>
  51.   $12.25<input type="text" name="textfield1"  title="12.25" onkeyup="calcVals();"/><br/>
  52.   $ 5.00<input type="text" name="textfield2"  title="-5.00" onkeyup="calcVals();"/><br/>
  53.   <input type="text" readonly="" name="valTotal" id="valTotal" value="$0"/>
  54.   <input type="submit" name="send" value="SEND" />
  55. </form>
  56. </body>
  57. </html>
  58.  
Jan 24 '11 #1

✓ answered by Dormilich

onkeyup is useless on <select>s, try onchange instead.

4 1820
Dormilich
8,652 Expert Mod 8TB
onkeyup is useless on <select>s, try onchange instead.
Jan 24 '11 #2
With a few minor change it's working right now

But I still have a concern with it, I would like the total to display with forced 2 decimals, what should I change to my code ?

This is not doing any thing !

Expand|Select|Wrap|Line Numbers
  1. form.valTotal.value = round(form.valTotal.value, 2);
  2.  
Maybe something else to try ?

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>My Untitled Document</title>
  4. <script type="text/javascript" language="javascript">
  5. <!--
  6. function calcVals() {
  7.     var form = document.form1;
  8.     var total = document.getElementById("valTotal");
  9.     var currentTotal = total.value.replace('$','');
  10.      // document.pgCartOrder.calculatedTotal.value='0';
  11.     var tempTotal = 0;
  12.     var totalFields = eval(form.elements.length-1);
  13.     //alert (totalFields);
  14.       for (i=0; i < totalFields; i++) {
  15.         if(form.elements[i].type == 'submit'){
  16.         }else{
  17.             if(form.elements[i].value > 0){  
  18.                 tempTotal = tempTotal + parseFloat(form.elements[i].title * parseInt(form.elements[i].value));
  19.             }else if(form.elements[i].value = 'NaN'){
  20.                 form.elements[i].value = "";
  21.             }
  22.         }
  23.       }
  24.  
  25.     if (String(total) != 'NaN') {
  26.         form.valTotal.value = "$"+ tempTotal;
  27.     } else {
  28.         form.valTotal.value = 'ERROR';
  29.     }
  30. }
  31. form.valTotal.value = round(form.valTotal.value, 2);
  32. -->
  33. </script>
  34.  
  35.  
  36. </head>
  37.  
  38. <body onload="calcVals()">
  39.  <? if ($_POST['send']){ ?>
  40.     <? echo floor($_POST['textfield']) ;?>
  41.     <? echo "<br>";?>
  42.     <? echo floor($_POST['textfield1']) ;?>
  43.     <? echo "<br>";?>
  44.     <? echo floor($_POST['textfield2']) ;?>
  45.     <? echo "<br>";?>
  46.  
  47. <? } ?>
  48.  
  49. <form id="form1" name="form1" method="post" action="" >
  50.   $ 9.25
  51.   <select name="textfield" title="9.25" onchange="calcVals(this.form.form1)">
  52.       <option value="1" selected="selected">1</option>
  53.     <option value="2">2</option>
  54.   </select>
  55.   <br />
  56.    $ 12.25
  57.   <select name="textfield1" title="12.25" onchange="calcVals(this.form.form1)">
  58.       <option value="0" selected="selected">As gift</option>
  59.     <option value="1">1</option>
  60.     <option value="2">2</option>
  61.   </select>
  62.   <br />
  63.    $ -5.00
  64.   <select name="textfield2" title="-5.00" onchange="calcVals(this.form.form1)">
  65.       <option value="0" selected="selected">No</option>
  66.     <option value="1">Yes</option>
  67.   </select>
  68.   <br />
  69.   <input type="text" readonly="" name="valTotal" id="valTotal" value="$0"/>
  70.   <input type="submit" name="send" value="SEND" />
  71. </form>
  72. </body>
  73. </html>
  74.  
Jan 24 '11 #3
Dormilich
8,652 Expert Mod 8TB
as far as I remember, there is no native round() function in JS (besides that this call is weird in JS*). try toFixed().


* - JavaScript is a highly object oriented language.
Jan 24 '11 #4
Thank you
Question resolved

Script below for some need the same

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3.             function calcVals()
  4.             {
  5.                 var
  6.                     selects = document.getElementById('form1').getElementsByTagName('select'),
  7.                     total   = 0,
  8.                     i;
  9.  
  10.                 for (i = 0; i < selects.length; i++) {
  11.                     total += (isNaN(selects[i].value) ? 0 : Number(selects[i].value)) * (isNaN(selects[i].title) ? 0 : Number(selects[i].title));
  12.                 }
  13.                 document.getElementById('valTotal').value = '€ ' + total.toFixed(2);
  14.             }
  15.  
  16.         </script>
  17.  
Jan 25 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Kevin Ingram | last post: by
1 post views Thread by Nagel Oxles | last post: by
5 posts views Thread by gidmakus | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.