Javascript Calculating a Form

Question

Please help me: when i put this code it shows the result for only a sec before it refreshes the entire page. I havent been able to find any problems apart from it saying that calcCharterCost is not defined. I do not know what it means by that because to me it looks defined. Thanks,

<script>
function calcCharterCost()
{
  var destList = document.getElementById("destList");
  var distance = destList.options[destList.selectedIndex].id;
  var speedList = document.getElementById("speedList");
  var gph = speedList.options[speedList.selectedIndex].id;
  var speed = speedList.value;

  var fuelCost = document.getElementById("fuelCost").value;
  var feeOutput = document.getElementById("fee");
  var time;
  time = (distance / speed);

  var cost;
  cost = time * gph * fuelCost;
  feeOutput.innerHTML = "$" + cost;
}

function validate() 
  { 
  if (isNaN(fuelCost) == true)
  {
     document.getElementById("error").innerHTML="Error invalid Fuel Cost";
     document.myform.fuelCost.value="";
     document.myform.fuelCost.focus();
  }
  } 
</script>

<body>
<form name="myform">
<select id="destList">
  <option id="28">Falmouth to Nantucket</option>
  <option id="11">Falmouth to Edgartown</option>
  <option id="7.6">Falmouth to Oak bluffs</option>
  <option id="38">Falmouth to Newport</option>
</select>
<p/>
<select id="speedList">
  <option id="18" value="14">14 kt</option>
  <option id="24" value="18">18 kt</option>
  <option id="30" value="20">20 kt</option>
  <option id="37" value="22">22 kt</option>
</select>
<p/>
<input type="text" id="fuelCost" value="4.25" onblur="validate()"/> 

<i><small><span style="color:red;" id="error" ></i></small> </span>
<p/>

<button onClick="calcCharterCost()">Calculate</button>
<p> The cost of the charter is <div id="fee">XXXX</div>
</body>

Your button needs to have a type attribute in this case you are missing type="button" so The default attribute for a button is submit. That is why it was submitting. — user2242618, Aug 16 '16 at 19:12

score -1 · Answer 1 · answered Aug 16 '16 at 19:14

By default a button without a type will submit a form.

Either give the button a non-submit type:

<button type="button" onClick="calcCharterCost()">Calculate</button>

Or remove the form tag:

<form name="myform">

The latter seems preferable anyway, since the form tag is never closed and technically the markup is invalid. Nothing is actually using this form, so it's not needed.

score -1 · Answer 2 · answered Aug 16 '16 at 19:27

You have markup errors and did not define fuelCost variable in global scope. When validate method executes, it cannot find the fuelCost variable as it is defined and used in calculate method.

I have fixed your script and markup issues. Please check out the corrected version and fiddle.

<script>
  var fuelCost = 0;

  function calcCharterCost() {
    var destList = document.getElementById("destList");
    var distance = destList.options[destList.selectedIndex].id;
    var speedList = document.getElementById("speedList");
    var gph = speedList.options[speedList.selectedIndex].id;
    var speed = speedList.value;

    fuelCost = document.getElementById("fuelCost").value;
    var feeOutput = document.getElementById("fee");
    var time;
    time = (distance / speed);

    var cost;
    cost = time * gph * fuelCost;
    feeOutput.innerHTML = "$" + cost;
  }

  function validate() {
    if (isNaN(fuelCost) == true) {
      document.getElementById("error").innerHTML = "Error invalid Fuel Cost";
      document.myform.fuelCost.value = "";
      document.myform.fuelCost.focus();
    }
  }
</script>

<body>
  <select id="destList">
    <option id="28">Falmouth to Nantucket</option>
    <option id="11">Falmouth to Edgartown</option>
    <option id="7.6">Falmouth to Oak bluffs</option>
    <option id="38">Falmouth to Newport</option>
  </select>
  <p>
    <select id="speedList">
      <option id="18" value="14">14 kt</option>
      <option id="24" value="18">18 kt</option>
      <option id="30" value="20">20 kt</option>
      <option id="37" value="22">22 kt</option>
    </select>
  </p>
  <input type="text" id="fuelCost" value="4.25" onblur="validate()" />
  <span style="color:red;" id="error"></span>

  <button onClick="calcCharterCost()">Calculate</button>
  The cost of the charter is
  <div id="fee">XXXX</div>
</body>

Form tag is not needed in this scenario as it is not referenced by any other part of your code. I removed it.

Fiddle

Javascript Calculating a Form

2 Answers2