|
HTA Application ~ Javascript & Textboxes for HTML Form
Building on the simple.hta form, we'll add 3 textboxes, code for a simple check that information has been entered into one of the textboxes and then
display what was entered into a message box. Add the following code to simple.hta within the form tags, but above the button.
Name (required) <input type="text" id="txtName" value="" /><br />
Address <input type="text" id="txtAddr" value="" /><br />
City <input type="text" id="txtCity" value="" /><br /><br />
Next, replace the existing Javascript with the following:
<script language="javascript" type="text/javascript">
window.resizeTo(640,480);
var strName, strAddr, strCity; // declare global variables
function Validate() { // check required fields and/or valid data
GetFormData();
if(strName=='') {
alert('The required Name field was blank.'); return false;
}
RunScript();
}
function GetFormData() { // get all form values
strName = document.getElementById('txtName').value;
strAddr = document.getElementById('txtAddr').value;
strCity = document.getElementById('txtCity').value;
}
function RunScript() { // do something
var strMsg;
strMsg = 'Name: '+strName+'\nAddress: '+strAddr+'\nCity: '+strCity;
alert(strMsg);
}
</script>
When you launch simple.hta, the Javascript resizes the window, declares 3 global variables that could be used in any of our functions and creates
3 functions, Validate, GetFormData and RunScript. The Start button calls Validate, which calls GetFormData and checks that something has been
entered into the Name field. If Name is empty, Validate quits and returns you to the form with a message. If something was entered into Name,
Validate calls Runscript, which here loads our 3 fields of data into a message.
Click the Start button to test the form. Functionality should be identical to that of simple.hta, except resizing the window of course. Without
a table structure, form fields won't line up like you see it here. You could right-click on this page, click show or view source, then copy the entire
form into simple.hta.
Copy the first line into the Style section. If you've copied the table structure, add both lines:
input {color:black; font:normal 12px arial; margin:2px;}
table#myform td {font:normal 12px verdana; text-align:right;}
|
