Main page

Retrieving fields values from the server on the fly

Description

This example shows how to retrieve field values from a database and populate form fields without refreshing the page.

Usage

Select a Customer in the "Create an Order" section. Watch the Shipping Information fields being populated with the data from the customers database table.

Steps to recreate

Page 1 (RetrievingFieldsValues):

  1. Create a new page.
  2. Use Grid and Record Builder to create the Grid and Record forms based on the orders and customers tables.
  3. On Step 2 of the Builder use the Build Query option to select 2 tables: orders and customerss, then select ' *' (all fields) from the orders table and the customer_name field from the customers table.
  4. On Step 6 of the Builder select all fields for the record. Also select  ListBox in the Control Type field for the customer_id field.
  5. For the customer_id listbox, set the Connection property to IntranetDB and select customers in the Data Source property, customer_id in the Bound Column property, customer_name in the Text Column property, integer in the Data Type property and Yes in the Required property.
  6. Under the Format tab of the Properties window, add the On Change event for the customer_id  listbox to: OpenCustomerInfo(this.value);
  7. Switch to the HTML mode and manually enter (or copy from the example) the content of the JavaScript function  OpenCustomerInfo(cust_id) as shown in the example.
  8. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Page 2 (GetCustomerInfo):

  1. Create a new page.
  2. Use the Record Builder to create the Customer Record form based on the customers table.  This form will be used to output the data for the parent page RetrievingFieldsValues .
  3. On Step 3 of the Builder, uncheck all the checkboxes: Allow Insert, Allow Update, Allow Delete and Allow Cancel.
  4. Delete all HTML tags inside the record leaving only labels: , , , .
  5. Modify the resulting HTML by adding JavaScript around each of  the output labels, as in this example: 
    window.opener.document.orders1.order_ship_address.value="";
    (refer to the original GetCustomerInfo page to see the code for all four labels)
  6. While in the HTML mode, add the getCustomerInfo() JavaScript function around the above JavaScript code as shown in the example. Also add this function call into the On Load event in <body>.

Database Tables used

Database: Intranet

Tables: customers, orders