VirtualMV/JavaScript/Forms/Example

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Work through a Form/JavaScript example with several form elements

Summary (js2_06)

<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>JavaScript forms - summary</title>
<script type="text/javascript">
<!--
function fnCalcVal() {
   vntNumber = eval(document.frmCalc.txtNumber.value);
   objFormVal = document.frmCalc.cboVal;
   vntSelectvalue = objFormVal.options[objFormVal.selectedIndex].value;
   document.frmCalc.txtValue.value = vntSelectvalue;
   vntResult = vntNumber*vntSelectvalue;
   document.frmCalc.txtResult.value=vntResult;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<form name="frmCalc">
  Enter a number:<input type="text" value="0" name="txtNumber" /><br />
  Select a value:
  <select name="cboVal" onChange="fnCalcVal()">
    <option value=10>Ten</option>
    <option value=20>Twenty</option>
    <option value=30>Thirty</option>
  </select><br />
  Value: <input type="text" value="0" name="txtValue"  disabled="disabled" />
        Result: <input type="text" value="0" name="txtResult" disabled="disabled" /><br />
</form>
</body>
</html>

Note: Use of disabled means the text boxes cannot be changed by a user

Example :Click here to run js2_06.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/Example. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 24, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Forms/Example    (zotero)