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

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • samuel jenny
    New Member
    • Jan 2011
    • 3
    #1

    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

    Code:
    <html>
<head>
<title>My Untitled Document</title>
<script type="text/javascript" language="javascript">
<!--
function calcVals() {
    var form = document.form1;
    var total = document.getElementById("valTotal");
    var currentTotal = total.value.replace('$','');
     // document.pgCartOrder.calculatedTotal.value='0';
    var tempTotal = 0;
    var totalFields = eval(form.elements.length-1);
    //alert (totalFields);
      for (i=0; i < totalFields; i++) {
        if(form.elements[i].type == 'submit'){
        }else if(form.elements[i].type == 'text'){
            if(form.elements[i].value > 0){  
				tempTotal = tempTotal + parseFloat(form.elements[i].title * parseInt(form.elements[i].value));
            }else if(form.elements[i].value = 'NaN'){
				form.elements[i].value = "";
			}
        }
      }
    
    if (String(total) != 'NaN') {
        form.valTotal.value = "$"+ tempTotal;
    } else {
        form.valTotal.value = 'ERROR';
    }
}
form.valTotal.value = round(form.valTotal.value, 2);
-->
</script>


</head>

<body onload="calcVals()">
 <? if ($_POST['send']){ ?>
	<? echo floor($_POST['textfield']) ;?>
	<? echo "<br>";?>
	<? echo floor($_POST['textfield1']) ;?>
	<? echo "<br>";?>
	<? echo floor($_POST['textfield2']) ;?>
	<? echo "<br>";?>
	
<? } ?>

<form id="form1" name="form1" method="post" action="" >
  $ 9.25<input type="text" name="textfield" value="1"  title="9.25" onkeyup="calcVals();"/><br/>
  $12.25<input type="text" name="textfield1"  title="12.25" onkeyup="calcVals();"/><br/>
  $ 5.00<input type="text" name="textfield2"  title="-5.00" onkeyup="calcVals();"/><br/>
  <input type="text" readonly="" name="valTotal" id="valTotal" value="$0"/>
  <input type="submit" name="send" value="SEND" />
</form>
</body>
</html>
    Last edited by Niheel; Jan 25 '11, 02:05 PM.
    Tags: calculation, fields, form, quantity
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      onkeyup is useless on <select>s, try onchange instead.

        Comment

        • samuel jenny
          New Member
          • Jan 2011
          • 3
          #3
          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 !

          Code:
          form.valTotal.value = round(form.valTotal.value, 2);
          Maybe something else to try ?

          Code:
          <html>
<head>
<title>My Untitled Document</title>
<script type="text/javascript" language="javascript">
<!--
function calcVals() {
    var form = document.form1;
    var total = document.getElementById("valTotal");
    var currentTotal = total.value.replace('$','');
     // document.pgCartOrder.calculatedTotal.value='0';
    var tempTotal = 0;
    var totalFields = eval(form.elements.length-1);
    //alert (totalFields);
      for (i=0; i < totalFields; i++) {
        if(form.elements[i].type == 'submit'){
        }else{
            if(form.elements[i].value > 0){  
				tempTotal = tempTotal + parseFloat(form.elements[i].title * parseInt(form.elements[i].value));
            }else if(form.elements[i].value = 'NaN'){
				form.elements[i].value = "";
			}
        }
      }
    
    if (String(total) != 'NaN') {
        form.valTotal.value = "$"+ tempTotal;
    } else {
        form.valTotal.value = 'ERROR';
    }
}
[B]form.valTotal.value = round(form.valTotal.value, 2);[/B]
-->
</script>


</head>

<body onload="calcVals()">
 <? if ($_POST['send']){ ?>
	<? echo floor($_POST['textfield']) ;?>
	<? echo "<br>";?>
	<? echo floor($_POST['textfield1']) ;?>
	<? echo "<br>";?>
	<? echo floor($_POST['textfield2']) ;?>
	<? echo "<br>";?>
	
<? } ?>

<form id="form1" name="form1" method="post" action="" >
  $ 9.25
  <select name="textfield" title="9.25" [B]onchange="calcVals(this.form.form1)[/B]">
  	<option value="1" selected="selected">1</option>
	<option value="2">2</option>
  </select>
  <br />
   $ 12.25
  <select name="textfield1" title="12.25" onchange="calcVals(this.form.form1)">
  	<option value="0" selected="selected">As gift</option>
	<option value="1">1</option>
	<option value="2">2</option>
  </select>
  <br />
   $ -5.00
  <select name="textfield2" title="-5.00" onchange="calcVals(this.form.form1)">
  	<option value="0" selected="selected">No</option>
	<option value="1">Yes</option>
  </select>
  <br />
  <input type="text" readonly="" name="valTotal" id="valTotal" value="$0"/>
  <input type="submit" name="send" value="SEND" />
</form>
</body>
</html>

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              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.

                Comment

                • samuel jenny
                  New Member
                  • Jan 2011
                  • 3
                  #5
                  Thank you
                  Question resolved

                  Script below for some need the same

                  Code:
                  <script type="text/javascript">

			function calcVals()
			{
				var
					selects = document.getElementById('form1').getElementsByTagName('select'),
					total   = 0,
					i;

				for (i = 0; i < selects.length; i++) {
					total += (isNaN(selects[i].value) ? 0 : Number(selects[i].value)) * (isNaN(selects[i].title) ? 0 : Number(selects[i].title));
				}
				document.getElementById('valTotal').value = '€ ' + total.toFixed(2);
			}

		</script>

                    Comment

                    Previous template Next
                    Working...