Functions Language: Built-In Functions

The Message Box

A Simple Message Box

To help with script programming, the JavaScript language provides many functions already built-in the browser. These functions are readily available and you can use them as you see fit.

A message box is a rectangular window used to display a message to the user. To display a message box, use the alert() function. This function is used to display a message box that is equipped with a button with a caption as OK. As long as the message box displays, the user must close it in order to return to the browser, meaning the browser is not accessible while the message box is available.

The syntax of the alert() function is:

alert(WhatToDisplay);

The argument of this function can be a number. For example, to display the number 12 when the user clicks a button, you can use code as follows:

<Script Language="JavaScript">
function displayNumber()
{
  alert(12);
}
</Script>

<input type="button" value="Show Me" onClick="displayNumber()">

The above program could also have been written as:

<input type="button" value="Show Me" onClick="alert(12)">

The item to display on the message box can also be a word, a sentence, or a paragraph. In this case, provide the argument between double-quotes. Here is an example:

<Script Language="JavaScript">
function displayReminder()
{
  alert("Please make sure you submit your time sheet");
}
</Script>

<input type="button" value="Reminder" onClick="displayReminder()">

If you want to display the message on various lines, end each line with the new line constant represented as "\n". Here is an example:

<Script Language="JavaScript">
function displayReminder()
{
  alert("Please make sure you submit your time sheet\nto Human Resource today");
}
</Script>

<input type="button" value="Reminder" onClick="displayReminder()">

The item to display can also be an expression or a combination of items.

The Message Box With Options

A message box created with the alert() function is used only to display a message to the user and it is equipped with the OK button. In some cases you may want to ask a specific question to the user and expect the user to make a decision. To do this, the JavaScript language allows you to create a message equipped with two buttons, namely OK and Cancel.

To display a message box with more than one button, use the confirm() function. Its syntax is:

confirm(QuestionToAsk);

In the strict sense, the confirm() uses the same argument terminology as the alert() function. This means that you can use it to display a number, a word, a sentence, or a paragraph. To make it effective, the confirm() function is better used to ask/display a question to the user. The user makes a decision by clicking OK or Cancel. If the user clicks OK, the function returns true. If the user clicks Cancel, the function returns false.

Here is an example:

<Script Language="JavaScript">
function applicationReminder()
{
  confirm("The application you filled out is not complete.\nDo you still wanto to quit?");
}
</Script>

<input type="button" value="Reminder" onClick="applicationReminder()">

Conversion Functions

Integer Conversion

When the user types a value in an edit box or selects a value from a text-based control, the value is considered a simple group of words and the browser may not be able to identify or categorize what exists in a text-based control. The parsetInt() function is used to analyze what is in a text-based control. Its syntax is:

parseInt(Value)

When calling this function, you must provide the argument. The interpreter will examine it from left to right. If the value is a natural number, parseInt() returns that number. For example, if you call it as

parseInt("124")

the function will return 124. If the whole value is not a (natural) number, the interpreter will consider the numbers from left to right. If the first character of the argument is not a recognizable digit, the function would return a value known as NaN (not a number). If the first character from left is a digit, the interpreter will continue examining the other characters. When it finds a character that cannot be considered a digit, it would stop. It would then convert to number the digits found on the left side of the first non-digit character. For example, if you call it as

parseInt("216PLL")

the function would return 216.

Practical Learning: Converting a String to an Integer

Start your text editor and type the following:

<html>

<head>

<title>CD Publisher</title>
</head>

<body>

<h1>CD Publisher</h1>
<form name="frmOrder">
  <table border="0" width="344">
    <tr>
      <td width="231">Number of CDs ordered:</td>
      <td width="93"><input type="text" name="txtQuantity" size="10" value="0"></td>
      <td width="1"><input type="button" value="Calculate" name="btnCalculate"></td>
    </tr>
    <tr>
      <td width="211" colspan="3">At $2.95 for each CD</td>
    </tr>
    <tr>
      <td>Order Total:</td>
      <td width="70"><input type="text" name="txtOrderTotal" size="10"></td>
      <td width="70"><input type="reset" value="Reset" name="btnReset"></td>
    </tr>
  </table>
</form>

</body>

</html>

Save the file as CDPublisher.htm and preview it in your browser
After previewing the page, return to your text editor

To use the parseInt() function, change the file as follows:

<html>

<head>

<SCRIPT language="JavaScript">
function calculateOrder()
{
    var quantity, totalOrder;

    quantity = parseInt(document.frmOrder.txtQuantity.value);
    totalOrder = quantity * 2.95;

    document.frmOrder.txtOrderTotal.value = totalOrder;
}
</SCRIPT>

<title>CD Publisher</title>
</head>

<body>

<h1>CD Publisher</h1>
<form name="frmOrder">
  <table border="0" width="344">
    <tr>
      <td width="231">Number of CDs ordered:</td>
      <td width="93"><input type="text" name="txtQuantity" size="10" value="0"></td>
      <td width="1"><input type="button" value="Calculate" name="btnCalculate"

onClick="calculateOrder()"></td>
    </tr>
    <tr>
      <td width="211" colspan="3">At $2.95 for each CD</td>
    </tr>
    <tr>
      <td>Order Total:</td>
      <td width="70"><input type="text" name="txtOrderTotal" size="10"></td>
      <td width="70"><input type="reset" value="Reset" name="btnReset"></td>
    </tr>
  </table>
</form>

</body>

</html>

Save the file. Return to the browser and refresh it
Enter a natural number in the top text box and click Calculate
After previewing the page, return to Notepad and close it.

Decimal Conversion

Just as mentioned for the natural number, when a user enters a value in a text-based control or selects a value from a control, the value is primarily considered one or a group of characters. If the value is supposed to be a decimal number and you intend to use it in a calculation, you should first convert it. This can be done by passing it to the parseFloat() function. Its syntax is:

parseFloat(Value)

When you call this function, you must pass it a value, which is passed as a string. The interpreter would examine the argument. If all characters of the passed string are digits or can be evaluated to a decimal number, this function returns it. If some characters in the string are not digits and there is more than one decimal operator, the interpreter would consider characters from left to right, using the same approach we described for the integer.

Practical Learning: Converting to Decimal

Start a new file in your text editor and type the following:

<html>

<head>

<title>JavaScript Operations</title>
</head>

<body>

<form name="frmOperations">
  <table border="0" width="361">
    <tr>
      <td width="353" colspan="3" align="center">
        <h2>Operations</h2>
      </td>
    </tr>
    <tr>
      <td width="207" colspan="2">
        <table border="0" width="114%">
          <tr>
            <td width="38%">Number 1:</td>
            <td width="76%"><input type="text" name="txtNumber1" size="12"></td>
          </tr>
          <tr>
            <td width="38%">Number 2:</td>
            <td width="76%"><input type="text" name="txtNumber1" size="12"></td>
          </tr>
          <tr>
            <td width="38%">Result:</td>
            <td width="76%"><input type="text" name="txtResult" size="12"></td>
          </tr>
        </table>
      </td>
      <td width="146">
        <table border="0" width="100%">
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="1"></td>
            <td width="84%">Addition</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="2"></td>
            <td width="84%">Subtraction</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="3"></td>
            <td width="84%">Multiplication</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="4" checked></td>
            <td width="84%">Division</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td width="93" align="center"></td>
      <td width="114" align="center"><input type="reset" value="Reset" name="btnReset"></td>
      <td width="146"></td>
    </tr>
  </table>
</form>

</body>

</html>

Save the file as operations.htm and preview it in your browser
Return to your text editor

To convert values to decimal and perform some calculations, change the file as follows:

<html>

<head>

<title>JavaScript Operations</title>

<SCRIPT language="JavaScript">
function addition()
{
    var number1, number2, result;

    number1 = parseFloat(document.frmOperations.txtNumber1.value);
    number2 = parseFloat(document.frmOperations.txtNumber2.value);
    result = number1 + number2;

    document.frmOperations.txtResult.value = result;
}

function subtraction()
{
    var number1, number2, result;

    number1 = parseFloat(document.frmOperations.txtNumber1.value);
    number2 = parseFloat(document.frmOperations.txtNumber2.value);
    result = number1 - number2;

    document.frmOperations.txtResult.value = result;
}


function multiplication()
{
    var number1, number2, result;

    number1 = parseFloat(document.frmOperations.txtNumber1.value);
    number2 = parseFloat(document.frmOperations.txtNumber2.value);
    result = number1 * number2;

    document.frmOperations.txtResult.value = result;
}

function division()
{
    var number1, number2, result;

    number1 = parseFloat(document.frmOperations.txtNumber1.value);
    number2 = parseFloat(document.frmOperations.txtNumber2.value);
    result = number1 / number2;

    document.frmOperations.txtResult.value = result;
}
</SCRIPT>

</head>

<body>

<form name="frmOperations">
  <table border="0" width="361">
    <tr>
      <td width="353" colspan="3" align="center">
        <h2>Operations</h2>
      </td>
    </tr>
    <tr>
      <td width="207" colspan="2">
        <table border="0" width="114%">
          <tr>
            <td width="38%">Number 1:</td>
            <td width="76%"><input type="text" name="txtNumber1" size="12"></td>
          </tr>
          <tr>
            <td width="38%">Number 2:</td>
            <td width="76%"><input type="text" name="txtNumber2" size="12"></td>
          </tr>
          <tr>
            <td width="38%">Result:</td>
            <td width="76%"><input type="text" name="txtResult" size="12"></td>
          </tr>
        </table>
      </td>
      <td width="146">
        <table border="0" width="100%">
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="1"

onClick="addition()"></td>
            <td width="84%">Addition</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="2"

onClick="subtraction()"></td>
            <td width="84%">Subtraction</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="3"

onClick="multiplication()"></td>
            <td width="84%">Multiplication</td>
          </tr>
          <tr>
            <td width="16%"><input type="radio" name="optOperation" value="4" checked

onClick="division()"></td>
            <td width="84%">Division</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td width="93" align="center"></td>
      <td width="114" align="center"><input type="reset" value="Reset" name="btnReset"></td>
      <td width="146"></td>
    </tr>
  </table>
</form>


</body>

</html>

Save the file and refresh your browser

Conversion to a String

Using the above two functions, we saw how to convert a string to either an integer or a float. Conversely, if you want to convert a number or another value to a string, pass it to the String() function. Its syntax is:

String(Value)

This function simply converts to a string any value you pass to it.

Precision Conversion

When the interpreter has performed an operation, it produces a result with all the digits it judged necessary. An example would be 12.4893490389

In some cases, you may want to limit the number of characters used to display the number. For example, you may prefer the above number as 12.48934. To limit the overall number of digits used to represent a number, you can call the toPrecision() function. Its syntax:

Value.toPrecision(number)

Enter the desired number of digits in the parentheses of this function.

Conversion to Fixed Decimal

After processing a decimal value, you may want to display it in a control as we did above. JavaScript has a default technique of evaluating the number of digits on the left side of the decimal separator, which is fine in many scientific calculations. In some cases, you ma want to limit the number of digits of precision. To support this, JavaScript provides the toFixed() function. Its syntax is:

Value.toFixed(numberOfDigits)

The Value factor is the value that will be converted. In the parentheses of the function, type the number of digits to display on the right side of the decimal separator.

Practical Learning: Converting to Fixed Decimal

Create a new file and type the following:

<html>
<head>

<script language="JavaScript">
function processShirts()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtShirtUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtShirtQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtShirtSubTotal.value = subTotal.toFixed(2);
}

function processPants()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtPantsUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtPantsQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtPantsSubTotal.value = subTotal.toFixed(2);
}

function processItem1()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem1UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem1Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem1SubTotal.value = subTotal.toFixed(2);
}

function processItem2()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem2UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem2Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem2SubTotal.value = subTotal.toFixed(2);
}

function processItem3()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem3UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem3Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem3SubTotal.value = subTotal.toFixed(2);
}

function processItem4()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem4UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem4Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem4SubTotal.value = subTotal.toFixed(2);
}

function calculateTaxAmount(price, tax)
{
    var amount = price * tax / 100;
    return amount;
}

function processOrder()
{
    var shirtsTotal, pantsTotal, item1Total,
        item2Total, item3Total, item4Total;

    var shirtsTotal = parseFloat(document.frmCleaningOrder.txtShirtSubTotal.value);
    var pantsTotal  = parseFloat(document.frmCleaningOrder.txtPantsSubTotal.value);
    var item1Total  = parseFloat(document.frmCleaningOrder.txtItem1SubTotal.value);
    var item2Total  = parseFloat(document.frmCleaningOrder.txtItem2SubTotal.value);
    var item3Total  = parseFloat(document.frmCleaningOrder.txtItem3SubTotal.value);
    var item4Total  = parseFloat(document.frmCleaningOrder.txtItem4SubTotal.value);

    var cleaningTotal = shirtsTotal + pantsTotal + item1Total +
			item2Total + item3Total + item4Total;
    var taxRate = parseFloat(document.frmCleaningOrder.txtTaxRate.value);
    var taxAmount = calculateTaxAmount(cleaningTotal, taxRate);
    var orderTotal = cleaningTotal + taxAmount;

    document.frmCleaningOrder.txtCleaningTotal.value = cleaningTotal.toFixed(2);
    document.frmCleaningOrder.txtTaxAmount.value = taxAmount.toFixed(2);
    document.frmCleaningOrder.txtOrderTotal.value = orderTotal.toFixed(2);
}

</script>
<title>Geogetown Cleaning Services - Cleaning Order</title>
</head>

<body>
<h1>Georgetown Cleaning Services</h1>
<form name="frmCleaningOrder">
  <table border="0" width="540">
    <tr>
      <td width="446" colspan="4">
        <h3>Order Identification</h3>
      </td>
    </tr>
    <tr>
      <td width="106">Customer Name:</td>
      <td width="150"><input type="text" name="txtCustomerName" size="20"></td>
      <td width="108">Customer Phone:</td>
      <td width="150"><input type="text" name="txtCustomerPhone" size="20"></td>
    </tr>
    <tr>
      <td width="106">Date Left:</td>
      <td width="150"><input type="text" name="txtDateLeft" size="20"></td>
      <td width="108">Time Left:</td>
      <td width="150"><input type="text" name="txtTimeLeft" size="20"></td>
    </tr>
    <tr>
      <td width="106">Date Expected:</td>
      <td width="150"><input type="text" name="txtDateExpected" size="20"></td>
      <td width="108">Time Expected:</td>
      <td width="150"><input type="text" name="txtTimeExpected" size="20"></td>
    </tr>
  </table>
  <hr>
  <table border="0" width="596">
    <tr>
      <td width="381">
        <table border="0" width="381">
          <tr>
            <td width="128"><b>Item Type</b></td>
            <td width="71"><b>Unit Price</b></td>
            <td width="38"><b>Qty</b></td>
            <td width="46"></td>
            <td width="66"><b>Sub-Total</b></td>
          </tr>
          <tr>
            <td width="128">Shirts</td>
            <td width="71"><input type="text" name="txtShirtUnitPrice" size="7" value="0.95"></td>
            <td width="38"><input type="text" name="txtShirtQuantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnShirts"
		onClick="processShirts()"></td>
            <td width="66"><input type="text" name="txtShirtSubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128">Pants</td>
            <td width="71"><input type="text" name="txtPantsUnitPrice" size="7" value="2.75"></td>
            <td width="38"><input type="text" name="txtPantsQuantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnPants"
		onClick="processPants()"></td>
            <td width="66"><input type="text" name="txtPantsSubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem1">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71"><input type="text" name="txtItem1UnitPrice" size="7" value="0.00"></td>
            <td width="38"><input type="text" name="txtItem1Quantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem1"
		onClick="processItem1()"></td>
            <td width="66"><input type="text" name="txtItem1SubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem2">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71"><input type="text" name="txtItem2UnitPrice" size="7" value="0.00"></td>
            <td width="38"><input type="text" name="txtItem2Quantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem2"
		onClick="processItem2()"></td>
            <td width="66"><input type="text" name="txtItem2SubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem3">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71"><input type="text" name="txtItem3UnitPrice" size="7" value="0.00"></td>
            <td width="38"><input type="text" name="txtItem3Quantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem3"
		onClick="processItem3()"></td>
            <td width="66"><input type="text" name="txtItem3SubTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="128"><select size="1" name="cboItem4">
                <option selected>None</option>
                <option>Women Suit</option>
                <option>Dress</option>
                <option>Regular Skirt</option>
                <option>Skirt With Hook</option>
                <option>Men's Suit 2Pc</option>
                <option>Men's Suit 3Pc</option>
                <option>Sweaters</option>
                <option>Silk Shirt</option>
                <option>Tie</option>
                <option>Coat</option>
                <option>Jacket</option>
                <option>Swede</option>
              </select></td>
            <td width="71"><input type="text" name="txtItem4UnitPrice" size="7" value="0.00"></td>
            <td width="38"><input type="text" name="txtItem4Quantity" size="4" value="0"></td>
            <td width="46"><input type="button" value="Calc" name="btnItem4"
		onClick="processItem4()"></td>
            <td width="66"><input type="text" name="txtItem4SubTotal" size="8" value="0.00"></td>
          </tr>
        </table>
      </td>
      <td width="201">
        <table border="0" width="100%">
          <tr>
            <td width="100%" align="center" colspan="2"><input type="button" value="Calculate Order"
		 name="btnCalculate" onClick="processOrder()"></td>
          </tr>
          <tr>
            <td width="50%">Cleaning Total:</td>
            <td width="50%"><input type="text" name="txtCleaningTotal" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="50%">Tax Rate</td>
            <td width="50%"><input type="text" name="txtTaxRate" size="6" value="5.75">%</td>
          </tr>
          <tr>
            <td width="50%">Tax Amount:</td>
            <td width="50%"><input type="text" name="txtTaxAmount" size="8" value="0.00"></td>
          </tr>
          <tr>
            <td width="50%">Order Total:</td>
            <td width="50%"><input type="text" name="txtOrderTotal" size="8" value="0.00"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <hr>
  <p><input type="reset" value="Start New Cleaning Order" name="btnNewOrder"></p>  
</form>

</body>
</html>

Save it as cleaningorder1.htm in your JavaScript Lessons folder
Preview it in your browser and process an order. Here is an example:
Return to your text editor

Expression Evaluation

In some cases, you may want to evaluate an expression before taking an action on it, to make sure that the expression is valid. The function that can perform this is called eval and its syntax is:

eval(Expression)

This function receives as argument a string that represents an expression and processes it.

Practical Learning: Evaluating Expressions

To use the eval() function, change the top section of the file as follows:

<html>
<head>

<script language="JavaScript">
function processShirts()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtShirtUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtShirtQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtShirtSubTotal.value = subTotal.toFixed(2);
}

function processPants()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtPantsUnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtPantsQuantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtPantsSubTotal.value = subTotal.toFixed(2);
}

function processItem1()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem1UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem1Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem1SubTotal.value = subTotal.toFixed(2);
}

function processItem2()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem2UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem2Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem2SubTotal.value = subTotal.toFixed(2);
}

function processItem3()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem3UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem3Quantity.value);
    var subTotal  = unitPrice * quantity;

    document.frmCleaningOrder.txtItem3SubTotal.value = subTotal.toFixed(2);
}

function processItem4()
{
    var unitPrice = parseFloat(document.frmCleaningOrder.txtItem4UnitPrice.value);
    var quantity  = parseInt(document.frmCleaningOrder.txtItem4Quantity.value);
    var subTotal  = eval(unitPrice * quantity);

    document.frmCleaningOrder.txtItem4SubTotal.value = subTotal.toFixed(2);
}

function calculateTaxAmount(price, tax)
{
    var amount = eval(price * tax / 100);
    return amount;
}

function processOrder()
{
    var shirtsTotal, pantsTotal, item1Total,
        item2Total, item3Total, item4Total;

    var shirtsTotal = parseFloat(document.frmCleaningOrder.txtShirtSubTotal.value);
    var pantsTotal  = parseFloat(document.frmCleaningOrder.txtPantsSubTotal.value);
    var item1Total  = parseFloat(document.frmCleaningOrder.txtItem1SubTotal.value);
    var item2Total  = parseFloat(document.frmCleaningOrder.txtItem2SubTotal.value);
    var item3Total  = parseFloat(document.frmCleaningOrder.txtItem3SubTotal.value);
    var item4Total  = parseFloat(document.frmCleaningOrder.txtItem4SubTotal.value);

    var cleaningTotal = eval(shirtsTotal + pantsTotal + item1Total +
			item2Total + item3Total + item4Total);
    var taxRate = parseFloat(document.frmCleaningOrder.txtTaxRate.value);
    var taxAmount = calculateTaxAmount(cleaningTotal, taxRate);
    var orderTotal = eval(cleaningTotal + taxAmount);

    document.frmCleaningOrder.txtCleaningTotal.value = cleaningTotal.toFixed(2);
    document.frmCleaningOrder.txtTaxAmount.value = taxAmount.toFixed(2);
    document.frmCleaningOrder.txtOrderTotal.value = orderTotal.toFixed(2);
}

</script>
<title>Geogetown Cleaning Services - Cleaning Order</title>
</head>

Save the file and preview it in your browser or refresh the browser
Process another order

Functions Language

Pages

Built-In Functions

No comments:

Post a Comment

Related Scripting

Disqus for Functions