Creating the new employee form

The detail page that is created from the code in the previous example essentially is a form whose field values reflect the current values. If you were working with data of a more complex nature than the simple employee directory example used here, you may want to have separate pages for view and edit functions.

Below is the form for this simple employee directory example.

Example code for new employee form

<body onLoad="buildEmployeeList()"> 
    <h3>Employee Directory</h3> 
    <!-- this span will give us a placeholder to dynamically 
        create the employee list --> 
    <span id="listSpan"></span> \
    <hr> 
    <a href="./newemp.html">Add new employee</a> 
    <!-- put a hidden link to the update page so it gets downloaded --> 
    <a href="./update_employee.html"></a> 
</body>

The JavaScript onLoad event in the body tag calls the populateForm() function, which loads the correct information from the database into the form fields. The onClick function calls the doForm() function, which saves the data in the database and prepares it for sending to the server.

There is no action attribute in the form element. Because the above example assumes an offline status, all of the form processing is done in JavaScript by the page itself. Although it is possible to write a POD to handle the form processing and call the POD from the action URL, it is outside the scope of this example. See Writing C Code for PODS.

To create the new employee form

Read the value of the stored database key and use that value to look up the rest of the row values.

Code for step 1:

lastName = PropertiesDBGetValue("sessiondb", currentid");
if (!lastName) {
    //handle error here
    return;
 }

Initialize the M-Business XML POD.
Open the avgoEmpDir database.

Reset the record pointer to the beginning.

Code for steps 2 – 4:

dbMgr = CreateObject("avantgo.db");
dbSet = dbMgr.open("avgoEmpDir", "r");
dbSet.moveFirst();

Search the database for the record you want.

If the record isn't found, display an error, then go back to the list page.

Code for steps 5 and 6:

var search = dbSet.createSearch("id = " + empId);
    if(!dbSet.find(search)) {
        alert("Could find record " + empId);
        window.location = "index.html";
        return;
    }

Set the value of the form elements using the DOM.

Close the data set.

Code for steps 7 and 8:

document.updateForm.firstName.value = dbSet.firstname;
document.updateForm.lastName.value = dbSet.lastname;
document.updateForm.phoneNumber.value = dbSet.phonenumber;

dbSet.close();

Send feedback about this page using email.