Member Avatar for Mike_23

Hi i am looking for a script to put on my website that will have the following

Number of Pallet Spaces (customer to enter 1 2 or 3 )
1 0.95p per mile
2 1.10 per mile
3 1.25 per mile
Price per mile not to be shown on the form

then amount of miles

Then a totals box.

I have tried to use other and change the script but i am new to this so struggling a bit.
If anyone could help i would be greatful.
here is a link to my spreadsheet of how i would like the calculator to be.
Red = customer cannot change
Green = customer add the miles
file:///C:/Users/mike%20bunting/Desktop/Bunting%20Courier%20Services%20stationary/milage%20calculator.htm

Regards
Mike

  • 3 Contributors
  • 2 Replies
  • 147 Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by jalarie

Dani AI

Generated

A concise follow-up for : ’s example is a practical, working start and demonstrates how to keep the per‑mile price out of the visible form while computing the total. was correct that a local file:// path won’t be accessible to helpers — the page needs to be on a web server (or run from a local dev server) when testing in a browser.

Key points and improvements not shown in the sample:

  • Currency and rounding: avoid floating‑point surprises when dealing with money. Keep rates as whole pence (integers) for calculation, then format the final result to two decimals for display. Also normalise user decimal input (comma vs dot) before parsing.
  • Validation and UX: enforce min="0" and an appropriate step on the miles input, refuse negative or non‑numeric entries, and make the total field readonly so customers cannot edit it. Use the input event for live updates rather than relying only on change.
  • Accessibility: include explicit <label> elements, expose the calculated total with aria-live="polite" so screen readers announce updates, and ensure tab order is logical.

A minimal example of the safe arithmetic flow (shown here only for clarity):

var miles = parseFloat(milesStr.replace(',', '.')) || 0;
var ratePence = Math.round(parseFloat(rate) * 100);
var totalPence = Math.round(ratePence * miles);
var totalDisplay = (totalPence / 100).toFixed(2);

Final cautions: never trust client-side totals for billing — validate and recompute server‑side before charging or recording an order. For local development, run a simple static server (for example, python -m http.server) instead of using file:// so scripts and relative paths behave like a hosted site. For reference on formatting and input types see Number.toFixed and input type=number.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Did you expect us to be able to access your local file on your PC from here?

This forum is for help, sure, but not for doing all the work for you. If you need some programming work done, then tell us how much you're offering for this, otherwise show us specifically where you're stuck. Show your markup / code.

Member Avatar for jalarie

Start with this and change as needed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  <head>

    <title>Mike</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="en-US" />
    <meta name="Author" content="James Alarie - jalarie@umich.edu" />
    <meta name="description" content="Page for Mike." />
    <meta name="keywords" content="calculator" />

<!--
Hi i am looking for a script to put on my website that will have the following

Number of Pallet Spaces (customer to enter 1 2 or 3 )
 1 0.95p per mile
 2 1.10 per mile
 3 1.25 per mile
 Price per mile not to be shown on the form

then amount of miles

Then a totals box.

I have tried to use other and change the script but i am new to this so struggling a bit.
 If anyone could help i would be greatful.
 here is a link to my spreadsheet of how i would like the calculator to be.
 Red = customer cannot change
 Green = customer add the miles
 file:///C:/Users/mike%20bunting/Desktop/Bunting%20Courier%20Services%20stationary/milage%20calculator.htm

Regards
Mike
-->

  </head>

  <body id="test01" class="body1">
   <div id="Body">
<!-- Page Header -->
    <div id="Header">
      <h1>Mike</h1>
      <hr />
    </div>

<!-- Content -->
    <div id="Content">
      <br />
      <noscript>
        <p class="notice">
          You must have scripting enabled to make full use of this page.
        </p>
      </noscript>
      <script type="text/javascript">
        /*<![CDATA[*/
"use strict";

  function CalcIt() {
    var f1, INumPI, INumPT, INumPV, IMiles;
    f1=document.forms[0];                           // abbreviation
    INumPI=f1.NumP.selectedIndex;                   // select index
    INumPT=f1.NumP.options[INumPI].text;            // ...on-screen text
    INumPV=f1.NumP.options[INumPI].value;           // ...embedded value
    IMiles=f1.NumMiles.value;
    f1.TotalCost.value=INumPV*IMiles;
  } // CalcIt

        /*]]>*/
      </script>

      <div class="center">
        <form method="post" action="javascript:void(0);">
         <div class="form">
          <label for="NumP">Number of Pallets:</label>
          <select tabindex="1" name="NumP" id="NumP" onchange="CalcIt();">
            <option value="0.95" selected="selected">1</option>
            <option value="1.10">2</option>
            <option value="1.25">3</option>
          </select>
          <br />
          <label for="NumMiles">Number of Miles:</label>
          <input tabindex="1" type="text" size="20" value="0" name="NumMiles" id="NumMiles" onfocus="this.select();" onchange="CalcIt();" />
          <br />
          <label for="TotalCost">Total Cost:</label>
          <input tabindex="1" type="text" size="20" value="0" name="TotalCost" id="TotalCost" onfocus="this.select();" />
         </div><!-- form -->
        </form>

      </div><!-- center -->
    </div>

<!-- Page Footer -->
    <div id="Footer">
      <br clear="all" /><hr />
      Written on August 21, 2015, by:&nbsp;
      <a tabindex="1" href="mailto:jalarie@umich.edu">James Alarie</a>.
    </div>

   </div>
  </body>

</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.