www.webdeveloper.com
Results 1 to 2 of 2

Thread: change the way this form calculates one of the Fields

  1. #1
    Join Date
    Jun 2010
    Posts
    2

    change the way this form calculates one of the Fields

    Hi All,

    I'm having an issue trying to change the way this form calculates one of the Fields

    Ill attach code below and would like to know what to change.

    Background: the form is used to calculate the price of a package, the current calculation just adds 20 euro to the price of the package for each person that requires single occupancy. But I need to change it that it adds 20 euro per night per person.

    So Current Calculation is: QtyItem1 * PriceItem1 * QtyItem2 = TotalItem1

    But I need to change it to: QtyItem1 * PriceItem1 * PartNumItem3 = TotalItem1



    Below is the Fields used to do the calculation

    QtyItem1= Number Of Persons That require single ocupancy

    PartNumItem3= Number Of Nights

    QtyItem2= Hidden - Field with a value of one

    PriceItem1= Hidden - Price for single occupancy (20)

    Any Help Much Apprecated


    Below Is The Script I Am Using

    Code:
    <script type="text/javascript">
    function popup(mylink, windowname) {
    	if (! window.focus)return true;
    	var href;
    	if (typeof(mylink) == 'string') {
       		href=mylink;
    	} else {
       		href=mylink.href;
    		window.open(href, windowname, 'width=400,height=600,scrollbars=yes');
    		return false;
    	}
    }
    
    
    function submitform()
    {
      document.ChronoContact_book_trip_page2.submit();
    }
    
    function NoNegDec(nbr) {
    var Integer = Math.abs(Math.round(nbr));
    var Positive = Math.abs(Integer);
    return(Positive);
    }
    
    function forceright(field,length) {
        var str = "" + field;
        while (str.length < length)
            str = " " + str;
        return str;
    }
    
    function CurrencyDisplay(num,length2) {
    var fieldlength = length2;
    var displayedVersion = (Math.round(num * 100) / 100);
    if (displayedVersion == Math.round(num))
    {
    displayedVersion = displayedVersion + ".00";
    }
    else if ((10 * displayedVersion) == Math.round(num * 10))
    {
    displayedVersion = displayedVersion + "0";
    }
    return(forceright(displayedVersion,fieldlength));
    }
    
    function computeTotal(form) {
    
    if (form.DescItem3.value == '3Star_Hotel_Accommodation')
    {
    var Item3Desc = new Array("3Star Hotel Accommodation", 299, "3", "Sales:PackageSales");
    }
    
    if (form.DescItem3.value == '4Star_Hotel_Accommodation')
    {
    var Item3Desc = new Array("4Star Hotel Accommodation", 399, "3", "Sales:PackageSales");
    }
    
    if (form.DescItem3.value == '4Star_Lodgeing_Accommodation')
    {
    var Item3Desc = new Array("4Star Lodge Accommodation", 529, "3", "Sales:PackageSales");
    }
    
    document.ChronoContact_book_trip_page2.PriceItem1.value = CurrencyDisplay(20,7);
    document.ChronoContact_book_trip_page2.PriceItem3.value = CurrencyDisplay(Item3Desc[1],7);
    document.ChronoContact_book_trip_page2.PartNumItem3.value = Item3Desc[2];
    document.ChronoContact_book_trip_page2.SalesAcctItem3.value = Item3Desc[3];
    
    var SubT = 0;
    
        var Qty_Item1 = NoNegDec(document.ChronoContact_book_trip_page2.QtyItem1.value);
        var Item1_Price = document.ChronoContact_book_trip_page2.PriceItem1.value;
    	var Qty_Item2 = NoNegDec(document.ChronoContact_book_trip_page2.QtyItem2.value);
        var Total_Item1 = (Qty_Item1 * Item1_Price * Qty_Item2);
        SubT = SubT + Total_Item1;
    
        var Qty_Item3 = NoNegDec(document.ChronoContact_book_trip_page2.QtyItem3.value);
        var Item3_Price = document.ChronoContact_book_trip_page2.PriceItem3.value;
        var Total_Item3 = (Qty_Item3 * Item3_Price);
        SubT = SubT + Total_Item3;
    
        document.ChronoContact_book_trip_page2.QtyItem1.value = Qty_Item1;
        document.ChronoContact_book_trip_page2.PriceItem1.value = CurrencyDisplay(Item1_Price,7);
        document.ChronoContact_book_trip_page2.TotalItem1.value = CurrencyDisplay(Total_Item1,12);
    
        document.ChronoContact_book_trip_page2.QtyItem3.value = Qty_Item3;
        document.ChronoContact_book_trip_page2.PriceItem3.value = CurrencyDisplay(Item3_Price,7);
        document.ChronoContact_book_trip_page2.TotalItem3.value = CurrencyDisplay(Total_Item3,12);
    	
    
    document.ChronoContact_book_trip_page2.SubTotal.value = CurrencyDisplay(SubT,12);
    }
    </script>
    Below Is The Body Of The Form

    HTML Code:
    <h2>Join A Pre-Planned Walking Tour</h2>
     <div class="info">Please choose one of the scheduled walking tours you would like to take part on, then tell you how many people are in your group (max 6) and of those in your group, how many will require single ocupancey.</div>
      <div class="cfclear">&nbsp;</div>
    
     
     <h3> Group Details </h3>  
    <div class="form_item">
         <label class="cf_label" style="width: 120px;">Choose A Tour Date: </label>
        <select id="plannedtour" size="1" title=""  name="plannedtour">
        <option value="">Choose Option</option>      
    <option value="13thJul-15thJul">Tues 13th July To Thurs 15th July</option>
          <option value="24thJuly-26thJuly">Sat 24th July To Mon 26th July</option>
          <option value="6thAUG-8thAUG">Fri 6th Aug To Sun 8th Aug</option>
          <option value="17thAug-19thAug">Tues 17th Aug To Thurs 19th Aug</option>
    <option value="27thAug-29thAug">Fri 27th Aug To Sun 29th Aug</option>
          <option value="7thSep-9thSep">Tues 7th Sept To Thurs 9th Sept</option>
          <option value="6thAUG-8thAUG">Fri 24th Sept To Sun 26th Sept</option>
        </select> 
      </div>
    
    <div class="form_item">
    
    <label class="cf_label" style="width: 120px;">Number of persons in your group: </label>
    <select id="QtyItem3" name="QtyItem3" size="1" onchange="computeTotal(this.form);" onblur="computeTotal(this.form);" />
    <option value="">?</option>      
    <option value="1">01</option>
          <option value="2">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
        </select> 
    
    <input type="hidden" name="QtyItem2" style="text-align: center" maxlength="3" size="10" value="1" onChange="computeTotal(this.form);" onBlur="computeTotal(this.form);" />
    
     
    <h3> Choose Package</h3>
     
    <div class="form_item">
    <label class="cf_label" style="width: 120px;">Choose Package Type: </label>
       <select name="DescItem3" size="1" onchange="computeTotal(this.form);">
          <option value="">Choose Option</option>        
      <option value="3Star_Hotel_Accommodation">3Star Hotel Accommodation</option>
    <option value="4Star_Hotel_Accommodation">4Star Hotel Accommodation</option>
    <option value="4Star_Lodgeing_Accommodation">4Star Lodge Accommodation</option>
       </select>
     
     <p></p>Price For Package: 
       <input type="text" name="PriceItem3" maxlength="7" size="7" onfocus="this.blur();" />
       (Per Person Sharing)   <br />
        <input type="hidden" name="PartNumItem3" />
        <input type="hidden" name="SalesAcctItem3" />
     
     <p>How Many Persons Require Single Occupancy: 
       <input type="text" name="QtyItem1" style="text-align: center" maxlength="3" size="3" onchange="computeTotal(this.form);" onblur="computeTotal(this.form);" />
     </p></div>
     <p>&nbsp;</p>
      <table border="0" width="343" cellpadding="0">
    <tr><td align="center" colspan="3"></td></tr>
    
    <tr>
    <td width="66" align="center"></td>
    <td colspan="2" align="center"></td>
    </tr>
    
    
    <tr>
      <td align="center">&nbsp;</td>
      <td width="168" align="center"><div align="right">Single Surplus
        <input type="hidden" name="PriceItem1" maxlength="10" size="7" value="20" />
      </div></td>
      <td width="124" align="center">&euro;
        <input type="text" name="TotalItem1" maxlength="12" size="8" onChange="computeTotal(this.form);" /></td>
      </tr>
    <tr>
      <td align="center">&nbsp;</td>
      <td align="center"><div align="right">Total Package</div></td>
      <td align="center">&euro;
        <input type="text" name="TotalItem3" maxlength="8" size="8" onChange="computeTotal(this.form);" /></td>
      </tr>
    <tr>
      <td colspan="2" align="center"><div align="right">Total Tour Cost:</div></td>
      <td align="center">
        <input type="text" name="SubTotal" maxlength="8" size="8" onChange="computeTotal(this.form);" />
      </td>
      </tr>
    </table>
    
      <div class="form_item">
      <div class="form_element cf_button">
        <input value="Next Step" name="button_2" type="submit" />
      </div></div>
      <div class="cfclear">&nbsp;</div>
    </div></form>

  2. #2
    Join Date
    Jun 2010
    Posts
    2

    I Need help change the way this form calculates one of the Fields

    Hi All,

    I'm having an issue trying to change the way this form calculates one of the Fields

    Ill attach code below and would like to know what to change.

    Background: the form is used to calculate the price of a package, the current calculation just adds 20 euro to the price of the package for each person that requires single occupancy. But I need to change it that it adds 20 euro per night per person.

    So Current Calculation is: QtyItem1 * PriceItem1 * QtyItem2 = TotalItem1

    But I need to change it to: QtyItem1 * PriceItem1 * PartNumItem3 = TotalItem1



    Below is the Fields used to do the calculation

    QtyItem1= Number Of Persons That require single ocupancy

    PartNumItem3= Number Of Nights

    QtyItem2= Hidden - Field with a value of one

    PriceItem1= Hidden - Price for single occupancy

    Any Help Much Apprecated

    This is the script i am using
    Code:
    <script type="text/javascript">
    	elementExtend();
    	window.addEvent('domready', function() {	
    		});
    </script>		        <script type='text/javascript'>
    //<![CDATA[
    function popup(mylink, windowname) {
    	if (! window.focus)return true;
    	var href;
    	if (typeof(mylink) == 'string') {
       		href=mylink;
    	} else {
       		href=mylink.href;
    		window.open(href, windowname, 'width=400,height=600,scrollbars=yes');
    		return false;
    	}
    }
    
    
    function submitform()
    {
      document.ChronoContact_packagescript.submit();
    }
    
    function NoNegDec(nbr) {
    var Integer = Math.abs(Math.round(nbr));
    var Positive = Math.abs(Integer);
    return(Positive);
    }
    
    function forceright(field,length) {
        var str = "" + field;
        while (str.length < length)
            str = " " + str;
        return str;
    }
    
    function CurrencyDisplay(num,length2) {
    var fieldlength = length2;
    var displayedVersion = (Math.round(num * 100) / 100);
    if (displayedVersion == Math.round(num))
    {
    displayedVersion = displayedVersion + ".00";
    }
    else if ((10 * displayedVersion) == Math.round(num * 10))
    {
    displayedVersion = displayedVersion + "0";
    }
    return(forceright(displayedVersion,fieldlength));
    }
    
    function computeTotal(form) {
    
    if (form.DescItem3.value == '3Star_Hotel_Accommodation')
    {
    var Item3Desc = new Array("3Star Hotel Accommodation", 299, "3night", "Sales:Package Sales");
    }
    
    if (form.DescItem3.value == '4Star_Hotel_Accommodation')
    {
    var Item3Desc = new Array("4Star Hotel Accommodation", 399, "3night", "Sales:PackageSales");
    }
    
    if (form.DescItem3.value == '4Star_Lodgeing_Accommodation')
    {
    var Item3Desc = new Array("4Star Lodge Accommodation", 529, "3night", "Sales:Camera Sales");
    }
    
    document.ChronoContact_packagescript.PriceItem1.value = CurrencyDisplay(20,7);
    document.ChronoContact_packagescript.PriceItem3.value = CurrencyDisplay(Item3Desc[1],7);
    document.ChronoContact_packagescript.PartNumItem3.value = Item3Desc[2];
    document.ChronoContact_packagescript.SalesAcctItem3.value = Item3Desc[3];
    
    var SubT = 0;
    
        var Qty_Item1 = NoNegDec(document.ChronoContact_packagescript.QtyItem1.value);
        var Item1_Price = document.ChronoContact_packagescript.PriceItem1.value;
    	var Qty_Item2 = NoNegDec(document.ChronoContact_packagescript.QtyItem2.value);
        var Total_Item1 = (Qty_Item1 * Item1_Price * Qty_Item2);
        SubT = SubT + Total_Item1;
    
        var Qty_Item3 = NoNegDec(document.ChronoContact_packagescript.QtyItem3.value);
        var Item3_Price = document.ChronoContact_packagescript.PriceItem3.value;
        var Total_Item3 = (Qty_Item3 * Item3_Price);
        SubT = SubT + Total_Item3;
    
        document.ChronoContact_packagescript.QtyItem1.value = Qty_Item1;
        document.ChronoContact_packagescript.PriceItem1.value = CurrencyDisplay(Item1_Price,7);
        document.ChronoContact_packagescript.TotalItem1.value = CurrencyDisplay(Total_Item1,12);
    
        document.ChronoContact_packagescript.QtyItem3.value = Qty_Item3;
        document.ChronoContact_packagescript.PriceItem3.value = CurrencyDisplay(Item3_Price,7);
        document.ChronoContact_packagescript.TotalItem3.value = CurrencyDisplay(Total_Item3,12);
    	
    
    document.ChronoContact_packagescript.SubTotal.value = CurrencyDisplay(SubT,12);
    }//]]>
    </script>

    and this is the form

    HTML Code:
        <form name="ChronoContact_packagescript" id="ChronoContact_packagescript" method="post" >
    		
    				<h2>Group & Package Details</h2>
     <h3> Group Details </h3>  
    <div class="form_item">
      <div class="form_element cf_datetimepicker">
        <label class="cf_label" style="width: 120px;">Arrival date of your group: </label>
    
        <input  class="cf_datetime required" title="" size="16" id="arrival" name="arrival" type="text" />
        
      </div>
       <div class="cfclear">&nbsp;</div>
    </div>
    
    <div class="form_item">
    <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 120px;">Number of persons in your group: </label>
    
    <select id="QtyItem3" name="QtyItem3" size="1" onchange="computeTotal(this.form);" onblur="computeTotal(this.form);" />
    <option value="">?</option>      
          <option value="6">06</option>
    
           <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
           <option value="12">12</option>
    
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
           <option value="17">17</option>
          <option value="18">18</option>
    
          <option value="19">19</option>
          <option value="20">20</option>
        </select> 
      </div>
       <div class="cfclear">&nbsp;</div>
    </div>
    <input type="hidden" name="QtyItem2" style="text-align: center" maxlength="3" size="10" value="1" onChange="computeTotal(this.form);" onBlur="computeTotal(this.form);" />
    
    <div class="form_item">
    <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 120px;">How Many Persons Require Single Occupancy: </label>
    
    <input type="text" name="QtyItem1" style="text-align: center" maxlength="3" size="3" onchange="computeTotal(this.form);" onblur="computeTotal(this.form);" />
    </div>   
    <div class="cfclear">&nbsp;</div>
    </div>
    <input type="hidden" name="PriceItem1" maxlength="10" size="7" value="20" />
    <h3> Choose Package </h3>
     
    <div class="form_item">
    <label class="cf_label" style="width: 120px;">Choose Package Type: </label>
       <select name="DescItem3" size="1" onchange="computeTotal(this.form);">
    
          <option value="">Choose Option</option>        
      <option value="3Star_Hotel_Accommodation">3Star Hotel Accommodation</option>
    
    <option value="4Star_Hotel_Accommodation">4Star Hotel Accommodation</option>
    <option value="4Star_Lodgeing_Accommodation">4Star Lodge Accommodation</option>
       </select>
     </div>   
    <div class="cfclear">&nbsp;</div>
    </div>
    
     <p></p>Price For Package: 
       <input type="text" name="PriceItem3" maxlength="7" size="7" onfocus="this.blur();" />
       (Per Person Sharing)   <br />
    
        <input type="hidden" name="PartNumItem3" />
        <input type="hidden" name="SalesAcctItem3" />
    
       <table border="0" width="343" cellpadding="0">
    <tr><td align="center" colspan="3"></td></tr>
    
    <tr>
    <td width="66" align="center"></td>
    
    <td colspan="2" align="center"></td>
    </tr>
    
    
    <tr>
      <td align="center">&nbsp;</td>
      <td width="168" align="center"><div align="right">Single Surplus
        <input type="hidden" name="PriceItem1" maxlength="10" size="7" value="20" />
      </div></td>
      <td width="124" align="center">&euro;
        <input type="text" name="TotalItem1" maxlength="12" size="8" onChange="computeTotal(this.form);" /></td>
      </tr>
    
    <tr>
      <td align="center">&nbsp;</td>
    
      <td align="center"><div align="right">Total Package</div></td>
      <td align="center">&euro;
        <input type="text" name="TotalItem3" maxlength="8" size="8" onChange="computeTotal(this.form);" /></td>
      </tr>
    <tr>
      <td colspan="2" align="center"><div align="right">Total Tour Cost:</div></td>
      <td align="center">
        <input type="text" name="SubTotal" maxlength="8" size="8" onChange="computeTotal(this.form);" />
    
      </td>
      </tr>
    </table>
    
    
    
      <div class="form_item">
      <div class="form_element cf_button">
        <input value="Next Step" name="button_2" type="submit" />
      </div>  
      <div class="cfclear">&nbsp;</div>		<input type="hidden" name="01a72772233d6af41cd5d9f4c4a82ba3" value="1" />	
                    	<input type="hidden" name="1cf1" value="add8b479bcf32866fda39877c47e37f2" />
    
                    </form>

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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