Saving the Form

Next, we add a client-side JavaScript function, named saveContact, to HomePage.cls. This function is invoked when a user clicks the Save button on the form.

Add the following function to the page someplace after the XDATA Contents block.

/// save contact model to database
ClientMethod saveContact() [ Language = javascript ]
{
  // validate and save form
  var form = zenPage.getComponentById('contactForm');
  form.save();
  var table=zenPage.getComponentById('contactTable');
  //refresh data in contact table
  table.executeQuery();
}

This function performs two tasks:

1. It invokes the form component's save method. This method invokes the dataController component's save method, which uses the ContactModel %OnSaveSource and %OnStoreModel methods to save the form data to the database.

2. After updating the database data, the method invokes the tablePane component's executeQuery method to refresh the tablePane data.

Note that there are two other options for saving the form data to the database:

1. The saveContact function can invoke the save method of the dataController directly. This approach has the disadvantage of bypassing the form component's validation logic. On following pages, we use this validation logic to provide validation to the form.

2. We can code a standard form submit method and place a submit button on the form. With this approach, the page sends the form data back to the server using HTTP POST. Zen invokes the %OnSubmit passing it the values of the form controls. We would place the form processing logic in %OnSubmit. Note that unlike the other two options, this approach involves a page refresh each time that user clicks the Submit button.