VirtualMV/JavaScript/Forms/InputBox

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

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

  • Understand how a text input box is created

Note the input "type" attribute was introduced in HTML 5

Example (js2_01)

<html>
<head>
  <style type="text/css">.lbl { width: 200px; float:left;}</style>
</head>
<body>
<script type="text/javascript">
<!--
function fnDisplayName() {
    strMessage=document.myForm.txtFname.value;
    strMessage=strMessage +" " +document.myForm.txtLname.value;
    alert("Hello " + strMessage);
}
//-->
</script>
<form name="myForm">
<p><span class="lbl">Enter Your First Name:</span>
  <input type="text" name="txtFname" value="" /></p>
<p><span class="lbl">Enter Your Last Name:</span>
  <input type="text" name="txtLname" value="" /></p>
<p><span class="lbl">&nbsp;</span>
<input type="button" value="Press Me" onClick="fnDisplayName()" /></p>
</form></body>
</html>
  • Note: The css .lbl is used to space out the labels.
  • Warning** IE has another (feature) - you need to leave a space between the onClick string and "/>"

Example :Click here to run js2_01.

Example (js2_02)

<html><body>
<script type="text/javascript">
<!--
function fnDisplaySum() {
    vntNum1=eval(document.myForm.txtVal1.value);
    vntNum2=eval(document.myForm.txtVal2.value);
    vntSum=vntNum1+vntNum2;
    document.myForm.txtResult.value=vntSum;
}
//-->
</script>
<form name="myForm">
  Enter Your first number:&nbsp;
    <input type="number" name="txtVal1" value="0" /><br />
  Enter Your second number:&nbsp;
    <input type="number" name="txtVal2" value="0" /><br />
  <input type="button" value="Calculate Sum" onClick= "fnDisplaySum()" /><br />
  The result is:&nbsp;<input type="number" name="txtResult" /><br />
</form>
</body></html>

Example :Click here to run js2_02.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

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