Question

I am trying to get this script to work, but it is failing somewhere in the last alert. The script is supposed to pull everything from a form, and then spit out the results as an alert box. I’m pretty sure my html is correct.

function calcServiceTotal() {
var animalName = document.getElementById("name").value;
var ownerName = document.getElementById("owner").value;
var currentDate = document.getElementById("date").value;
var choosenService = document.getElementById("service");
var serviceName = choosenService.options[choosenService.selectedIndex].text;
var serviceCost = document.getElementById("value").value;
var taxCost = serviceCost * 0.07;
var totalCost = serviceCost + taxCost;
if (animalName == null || animalName == "")
    {
    alert("Please give us your pet's name.");
    return false;
    }
else if (ownerName == null || ownerName == "")
    {
    alert("Please give us your name.");
    return false;
    }
else if (currentDate== null || currentDate == "")
    {
    alert("Please give us a date.");
    return false;
    }
else
    {
    alert("Pet's Name:" + animalName + '\n' + "Owner's Name:" + ownerName + '\n' + "Service:" + choosenService + '\n' + "Cost: $" + serviceCost.toFixed(2) + '\n' + "Tax: $" + taxCost.toFixed(2) + "Total Cost:" + totalCost.toFixed(2));
    }
}

Here is the relevant html code.

<table width="339" border="0">
          <tr>
            <td width="329"><strong>Patient Information</strong></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>Name: &nbsp;&nbsp;
            <label for="textfield"></label>      <input type="text" name="textfield" id="name" /></td>
          </tr>
          <tr>
            <td>Owner: &nbsp; 
            <input type="text" name="textfield2" id="owner" /></td>
          </tr>
          <tr>
            <td>Date: &nbsp;&nbsp;&nbsp;
          <input type="text" name="textfield3" id="date" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><strong>Services</strong></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><form id="form1" name="form1" method="post">
              Select a Service:
              <label for="select"></label>
              <select name="select" id="service">
                <option>Basic Appointment - $50</option>
                <option>Extended Appointment - $75</option>
                <option>Vacination - $25</option>
                <option>Grooming - $35</option>
                <option>Bathing - $35</option>
                </select>
            </form></td>
          </tr>
          <tr>
            <td>Service Fee (from above): &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              <label for="textfield4"></label>
                <input type="text" name="textfield4" id="value" />
            </td>
          </tr>
          <tr>
            <td><form id="form2" name="form2" method="post" action="">
              <input type="button" onclick="calcServiceTotal();" name="button" id="button" value="calculate"/>
            </form></td>
          </tr>
        </table>

Answer 1

The problem is you’re using a function that is not defined, namely toFixed()

It is easy to find these errors if you use a debugging tool such as Firebug:

To clarify, toFixed is a function, but even though Javascript is loosely typed, in the context it’s supplied your are applying toFixed to a string (for which it is undefined) and in this context the string cannot be coerced into a number.

You must specify it manually, by changing your last alert to:

alert("Pet's Name:" + animalName + '\n' + "Owner's Name:" + ownerName + '\n' + "Service:" + choosenService + '\n' + "Cost: $" + Number(serviceCost).toFixed(2) + '\n' + "Tax: $" + Number(taxCost).toFixed(2) + "Total Cost:" + Number(totalCost).toFixed(2));

Note that there are other errors in your code, such as concatenating two string values (which store Numbers) instead of addition.