Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Posts
    158
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Order Form Calculation

    I have an order form that has the following:

    Text Field:
    VIP and Event Tickets = $200.00/each
    Event Tickets = $100.00/each

    Select Field:
    Raffle Tickets = 3 for $10.00 or 7 for $20.00

    Then at the bottom there is a text field for donations.

    I need to have a running total of the form selections. Can anyone help me put together all of these pieces?

    The code for my form looks like this:
    Code:
    <form name="Tickets">
    
    <table width="100%" height="213" border="0" cellpadding="2" cellspacing="5" class="twelve">
    <tr>
    <td align="right" height="25">Number of VIP Pre-Party & Main Event Tickets:</td>
    <td width="28%" height="25"><span class="nine"><input name="Number_VIP_Tickets" type="text" size="20"></span>$200.00/each</td>
    </tr>
    <tr>
    <td width="36%" align="right" height="25">Number of Main Event Tickets:</td>
    <td height="25"><span class="nine"><input name="Number_Event_Tickets" type="text" size="20"></span>$100.00/each</td>
    </tr>
    <tr>
    <td align="right" height="25">Number of Raffle Tickets:</td>
    <td height="25"><select size="1" name="Number_Raffle_Tickets">
    <option selected value="0">0</option>
    <option value="3">3</option>
    <option value="7">7</option>
    </select> 3 for $10.00 or 7 for $20.00 </td>
    </tr>
    <tr>
    <td width="36%" align="right" height="38">Donation:</td>
    <td height="38">$<input name="Donation" type="text" size="20"></td>
    </tr>
    <tr>
    <td align="right" height="38">Grand Total:</td>
    <td height="38" class="nine"><input name="Grand_Total" type="text" size="20"></td>
    </tr>
    <tr>
    <td colspan="2" align="center" height="27"><input type="submit" value="Buy Tickets" name="Buy Tickets">&nbsp;<input type="reset" value="Reset" name="B2"></td>
    </tr>
    </table>
    </form>

  • #2
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Heres a basic example:
    Code:
    <script type="text/javascript">
    function calc()
    {
    	var vip = parseInt(document.Tickets.Number_VIP_Tickets.value) * 200;
    	var event = parseInt(document.Tickets.Number_Event_Tickets.value) * 100;
    	var raffle = document.Tickets.Number_Raffle_Tickets.selectedIndex;
    	var donations = parseFloat(document.Tickets.Donation.value);
    	var raffleTotal;
    
    		if(raffle == 1)
    		{
    			raffleTotal = 10;
    		}
    		else if(raffle == 2)
    		{
    			raffleTotal = 20;
    		}
    
    	document.Tickets.Grand_Total.value = vip + event + raffleTotal + donations;
    }
    </script>
    You'd probably do some checking to make sure all that was entered is numbers, you could use isNaN() for that. But this is a simple example.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can try placing this into the HEAD of your document...
    It should allow a running total, number checking, formatting and some additional validation without the need to touch anything in the form itself...

    Code:
    <script type="text/javascript">
     <!--//
      function load(form){ // Written By: WillyDuitt@hotmail.com || 01/22/2005 \\;
       var form = document.forms[form]; 
        for(var i=0; i<form.elements.length; i++){
          if(form.elements[i].type.match(/text/i)){
             form.elements[i].onkeyup = function(){
              if(this.value.length > 0 && !this.value.match(/^\d+$/)){
                 this.value = this.value.replace(/[^\d]*/g,'');
                 alert('Please enter only numerics in this field!');
              }  else calculate(this.form);
            }
          }  
    
          if(form.elements[i].name.match(/GRAND_TOTAL/i)){ 
             form.elements[i].disabled = true;
             form.elements[i].value = '$0.00';
          }
    
          if(form.elements[i].name.match(/RAFFLE/i)){ 
             form.elements[i].onchange = function(){
             calculate(this.form);
            }
          }
    
          if(form.elements[i].name.match(/DONATION/i)){ 
             form.elements[i].onkeyup = function(){
              if(this.value.length > 0 && !this.value.match(/^(\d+)(\.\d{2,})|(\d+)$/)){
                 this.value = this.value.replace(/[^\d\.]*/g,''); return false;
              }  else if(RegExp.$2)this.value = (RegExp.$1/1+RegExp.$2/1).toFixed(2);
                 calculate(this.form); 
            }
             form.elements[i].onblur = function(){
              if(this.value.length > 0){
                 this.value = (this.value/1).toFixed(2);
              }  calculate(this.form);
            }
          }
        }
    
        form.onsubmit = function(){ calculate(this);
          if(this.Grand_Total.value.match(/^\$0.00$/)){
             alert('Please fill in the form prior to submittal.');
             return false;
          }  return true;
        }    
      }
    
      function calculate(form){ // Written By: WillyDuitt@hotmail.com || 01/22/2005 \\;
       var total = 0;
        for(var i=0; i<form.elements.length; i++){
         var input = form.elements[i]; 
          if(input.name.match(/VIP/i)){
             total += input.value/1*200;
          }
          if(input.name.match(/EVENT/i)){
             total += input.value/1*100;
          }
          if(input.name.match(/RAFFLE/i)){ 
             total += input.selectedIndex/1*10;
          }
          if(input.name.match(/DONATION/i)){ 
             total += input.value/1;
          }
        }    form.Grand_Total.value = '$'+total.toFixed(2).toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
      }      window.onload = new Function("load('Tickets')");
     //-->    
    </script>
    .....Willy
    Last edited by Willy Duitt; 01-22-2005 at 11:46 AM.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Posts
    158
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Brandoe85 and Willy,

    Thanks for both of your responses. Willy, your sample code is absolute perfect! I only have 2 questions about how to edit your code:

    1. If I want to add more options to the select field (ie, 10 tickets for $30.00 or 13 tickets for $35.00, etc)

    2. How do I edit the script so the Grand Total field uses a different font color as opposed to the light gray that current appears when the form is disabled?

  • #5
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Nice Willy keith1995...don't even bother with my script, it doesn't even compare to Willy's.

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by keith1995
    Brandoe85 and Willy,

    Thanks for both of your responses. Willy, your sample code is absolute perfect! I only have 2 questions about how to edit your code:

    1. If I want to add more options to the select field (ie, 10 tickets for $30.00 or 13 tickets for $35.00, etc)

    2. How do I edit the script so the Grand Total field uses a different font color as opposed to the light gray that current appears when the form is disabled?
    1) To calculate the select I used the index of the selected option times 10... In that javascript is zero based... The first option is 0, the second 1, the third 2, and so on... Thus, with the information you previously provided I merely multiplied by 10 which would once again work for the forth option of 10 tickets for $30.00 (index 3 X's 10).... However, if you were to deviate from that you will need to start adding conditional statements to check the selectedIndex...

    IE: if(input.selectedIndex == 4){ total+= 35; }

    2) The only two browsers I know of that allow styling of disabled form elements is Mozilla and MacIE5... You could remove the line which disables that input but this would allow the user to more easily edit the total... However, I did call the calculation function again when the form is submitted so, theoritically, it should recalculate and correct the total when the form is submitted... Of course, your entire form calculations are completely dependent upon javascript and if javascript is disabled, nothing will work... Thus, all these calculations should be verified on the server and these calculations should only be depended upon to provide the user some additional functionality and interactivity...

    Anyway, I would suggest that you remove the text input and replace it with a span which you can style anyway you want and which the user will not be tempted to edit... And add a hidden form element to pass the total value upon submit of the form...

    This would probably be more useful in that if the user has javascript disabled, they will not see the span nor will they see an empty Grand Total input with nothing in it...

    .....Willy

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Posts
    158
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Willy,

    The script works great except for one instance. If the form is submitted and the credit card is declined or another error results, we have an error page that has a back link that uses javascript to go back 1 in the history of the browser. This saves all of the elements of the form that was filled out except for the calculation. To get the calculation to work again, you need to select a new option in the select field. Is there anyway to either get the calculation to work on this back function or how can I go about resetting the select field so that it requires the customer to make a selection again? I don't want to reset the entire form, just the select field.

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try adding the calculate function call to the bottom of the load function which is already called onload...

    Code:
        form.onsubmit = function(){ calculate(this);
          if(this.Grand_Total.value.match(/^\$0.00$/)){
             alert('Please fill in the form prior to submittal.');
             return false;
          }  return true;
        }    calculate(form);
      }
    .....Willy

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Posts
    158
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Willy,

    I've actually commented that part out of the code as I'm doing other checks onsubmit. My script code looks like this:

    Code:
    <script type="text/javascript">
     <!--//
      function load(form){ // Written By: WillyDuitt@hotmail.com || 01/22/2005 \\;
       var form = document.forms[form]; 
        for(var i=0; i<form.elements.length; i++){
    
          if(form.elements[i].name.match(/VIP_Event_Total/i)){ 
             //form.elements[i].disabled = true;
             form.elements[i].value = '$0.00';
          }  
    
          if(form.elements[i].name.match(/Raffle_Total/i)){ 
             //form.elements[i].disabled = true;
             form.elements[i].value = '$0.00';
          }  
    
          if(form.elements[i].name.match(/GRAND_TOTAL/i)){ 
             //form.elements[i].disabled = true;
             form.elements[i].value = '$0.00';
          }
    
          if(form.elements[i].name.match(/Number_VIP_Tickets/i)){ 
             form.elements[i].onchange = function(){
             calculate(this.form);
            }
          }
    
          if(form.elements[i].name.match(/Number_Event_Tickets/i)){ 
             form.elements[i].onchange = function(){
             calculate(this.form);
            }
          }
    
          if(form.elements[i].name.match(/Number_Raffle_Tickets/i)){ 
             form.elements[i].onchange = function(){
             calculate(this.form);
            }
          }
    
          if(form.elements[i].name.match(/DONATION/i)){ 
             form.elements[i].onkeyup = function(){
              if(this.value.length > 0 && !this.value.match(/^(\d+)(\.\d{2,})|(\d+)$/)){
                 this.value = this.value.replace(/[^\d\.]*/g,''); return false;
              }  else if(RegExp.$2)this.value = (RegExp.$1/1+RegExp.$2/1).toFixed(2);
                 calculate(this.form); 
            }
    		
             form.elements[i].onblur = function(){
              if(this.value.length > 0){
                 this.value = (this.value/1).toFixed(2);
              }  calculate(this.form);
            }
          }
        }
      }
    
      function calculate(form){ // Written By: WillyDuitt@hotmail.com || 01/22/2005 \\;
       var total = 0;
       var total2 = 0;
       var total3 = 0;
        for(var i=0; i<form.elements.length; i++){
         var input = form.elements[i]; 
    	 
          if(input.name.match(/Number_VIP_Tickets/i)){ 
             total += input.selectedIndex/1*200; 
             total2 += input.selectedIndex/1*200;
          }
          if(input.name.match(/Number_Event_Tickets/i)){ 
             total += input.selectedIndex/1*100;
             total2 += input.selectedIndex/1*100;
          }
          if(input.name.match(/Number_Raffle_Tickets/i)){ 
             total += input.selectedIndex/1*10; 
             total3 += input.selectedIndex/1*10;
          }
          if(input.name.match(/DONATION/i)){ 
             total += input.value/1;
          }
        }    form.Grand_Total.value = '$'+total.toFixed(2).toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
    	     form.VIP_Event_Total.value = '$'+total2.toFixed(2).toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
    		 form.Raffle_Total.value = '$'+total3.toFixed(2).toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'');
      }       
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    
    function MM_validateForm() { //v4.0
      var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
      for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
        if (val) { nm=val.name; if ((val=val.value)!="") {
          if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
            if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
          } else if (test!='R') { num = parseFloat(val);
            if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
            if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
              min=test.substring(8,p); max=test.substring(p+1);
              if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
        } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
      } if (errors) alert('The following error(s) occurred:\n'+errors);
      document.MM_returnValue = (errors == '');
    }
    
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    //-->
    </script>
    Then in the body tag, I load the form:

    Code:
    <body bgcolor="#990000" link="#990000" vlink="#990000" alink="#990000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('https://theredball.org/images/sponsorships_over.jpg','https://theredball.org/images/participating_over.jpg','https://theredball.org/images/pre-party_over.jpg','https://theredball.org/images/purchase-tickets_over.jpg','https://theredball.org/images/auction-raffle_over.jpg','https://theredball.org/images/committee_over.jpg');load('Tickets')">

    It all works great, like I said. Just can't get the calculations to work when you come back from the error page.

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    Try adding the calculate function call to the bottom of the load function which is already called onload...

    Code:
        form.onsubmit = function(){ calculate(this);
          if(this.Grand_Total.value.match(/^\$0.00$/)){
             alert('Please fill in the form prior to submittal.');
             return false;
          }  return true;
        }    calculate(form);
      }
    .....Willy
    The bottom of the load function is the bottom of the load function... If you removed the onsubmit section of my code put it wherever the friggin bottom is now...

    Quote Originally Posted by keith1995
    Willy,
    It all works great, like I said. Just can't get the calculations to work when you come back from the error page.
    I understood that the first time which is why I suggested that you call the calculate function onload so the total is recalculated when returning to the page via your back button....

    If you want any more help from me you will need to provide either a link or the entire page code so I can run it... I would prefer the link...

    .....Willy
    Last edited by Willy Duitt; 01-27-2005 at 07:43 PM.


  •  

    Posting Permissions

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