472,988 Members | 2,599 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,988 software developers and data experts.

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 2015
Dormilich
8,658 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,658 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

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

Similar topics

1
by: Kevin Ingram | last post by:
Ok, this is probably a silly question but I just keep hitting a brick wall here. I usually develop my sites entirely in ASP and use a database for data storage, works great for me. I also...
2
by: please-answer-here | last post by:
Scenario: I'm having an asp page with a form with an action pointing to itself. The reason for that, it that the asp page depending on changes in any of two select fields with data from 2...
1
by: Volt | last post by:
is there any way to select and mark part of text in textarea by regular expression? i need to select the first string in textarea whitch is like xxxxx,xxx where x is any character
2
by: sojo | last post by:
As a web designer with only very rudimentary php skills, I've looked all over for a user friendly php form processor that includes sticky fields. The best match for my needs, php form wizard...
1
by: jimjack145 | last post by:
Hi All, I have one form with two multi select list box. I want to create query when user select value from it and click for result page. However i search on net but not find any code example....
3
by: FrozenDude | last post by:
I've implemented Allen Browne's Audit Log and it works quite well (thanks). However, my form has a series of calculated fields that fire on the form OnCurrent event. The calculation causes a...
1
by: vozzek | last post by:
Okay, I've got a tiny little form that works fine in Firefox, but I.E. won't let me push the button to file it. Here is the code: <form method="post" action="/search_results.php"> <table> ...
1
by: Nagel Oxles | last post by:
My form has has seven Text Boxes to receive user input. Users fall into either of two categories, Current and New. 'Command_Button_New' changes the visible property of four text Boxes and their...
4
by: kcropper | last post by:
Hi, Iíve been trolling these forums for a while now, and while Iíve found other related threads (e.g., http://bytes.com/topic/access/answers/702416-search-code-how-filter-using-code-sql), nothing has...
5
by: gidmakus | last post by:
I want three select fields where by each field is dependant on the other, what i mean is the first select field shows the values in the second while the second show the values in the the third field....
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
3
SueHopson
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.