[ DWR Website | Web Application Index ]

Dynamic Address Entry

This is a practical example of making form fill easier for users, and how simple this is with DWR.

A fully functional version of this example needs full access to a zipcode/postcode database. This jar file does not so this demo is restricted to the following UK postcodes:

Zipcode/Postcode:
House name/number:
Line 2:
Line 3:
Line 4:

 

 

When you tab out of the "postcode" field the browser calls the onchange event, which calls the fillAddress() function:

function fillAddress() {
  var postcode = dwr.util.getValue("postcode");
  AddressLookup.fillAddress(postcode, function(address) {
    dwr.util.setValues(address);
  });
}

This code first gets the contents of the postcode field, and then performs a call to the server using this postcode.

When the server replies we fill the values into the form using the setValues() function.

On the server, we could have created a JavaBean to hold the address data but for this example we have just used a java.util.Map. We could change to using a JavaBean without any JavaScript changes so long as the Map keys have the same names as the JavaBean properties.

public Map fillAddress(String origpostcode)
{
    Map reply = new HashMap();
    String postcode = LocalUtil.replace(origpostcode, " ", "");

    if (postcode.equalsIgnoreCase("LE167TR"))
    {
        reply.put(LINE2, "Church Lane");
        reply.put(LINE3, "Thorpe Langton");
        reply.put(LINE4, "MARKET HARBOROUGH");
    }
    ...
    else
    {
        reply.put(LINE2, "Postcode not found");
        reply.put(LINE3, "");
        reply.put(LINE4, "");
    }

    return reply;
}

HTML source:

<table>
  <tr>
    <td>Zipcode/Postcode:</td>
    <td><input id="postcode" type="text" onchange="fillAddress()"/></td>
  </tr>
  <tr>
    <td>House name/number:</td>
    <td><input id="house" type="text"/></td>
  </tr>
  <tr>
    <td>Line 2:</td>
    <td><input id="line2" type="text"/></td>
  </tr>
  <tr>
    <td>Line 3:</td>
    <td><input id="line3" type="text"/></td>
  </tr>
  <tr>
    <td>Line 4:</td>
    <td><input id="line4" type="text"/></td>
  </tr>
</table>

Javascript source:

function fillAddress() {
  var postcode = dwr.util.getValue("postcode");
  AddressLookup.fillAddress(postcode, function(address) {
    dwr.util.setValues(address);
  });
}

Java source:

package org.getahead.dwrdemo.address;

import java.util.HashMap;
import java.util.Map;

import org.directwebremoting.util.LocalUtil;

public class AddressLookup
{
    private static final String LINE4 = "line4";

    private static final String LINE3 = "line3";

    private static final String LINE2 = "line2";

    public Map fillAddress(String origpostcode)
    {
        Map reply = new HashMap();
        String postcode = LocalUtil.replace(origpostcode, " ", "");

        if (postcode.equalsIgnoreCase("LE167TR"))
        {
            reply.put(LINE2, "Church Lane");
            reply.put(LINE3, "Thorpe Langton");
            reply.put(LINE4, "MARKET HARBOROUGH");
        }
        else if (postcode.equalsIgnoreCase("NR147SL"))
        {
            reply.put(LINE2, "Rectory Lane");
            reply.put(LINE3, "Poringland");
            reply.put(LINE4, "NORWICH");
        }
        else if (postcode.equalsIgnoreCase("B927TT"))
        {
            reply.put(LINE2, "Olton Mere");
            reply.put(LINE3, "Warwick Road");
            reply.put(LINE4, "SOLIHULL");
        }
        else if (postcode.equalsIgnoreCase("E178YT"))
        {
            reply.put(LINE2, "");
            reply.put(LINE3, "PO Box 43108 ");
            reply.put(LINE4, "LONDON");
        }
        else if (postcode.equalsIgnoreCase("SN48QS"))
        {
            reply.put(LINE2, "Binknoll");
            reply.put(LINE3, "Wootton Bassett");
            reply.put(LINE4, "SWINDON");
        }
        else if (postcode.equalsIgnoreCase("NN57HT"))
        {
            reply.put(LINE2, "Heathville");
            reply.put(LINE3, "");
            reply.put(LINE4, "NORTHAMPTON");
        }
        else
        {
            reply.put(LINE2, "Postcode not found");
            reply.put(LINE3, "");
            reply.put(LINE4, "");
        }

        return reply;
    }
}

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="AddressLookup">
      <param name="class" value="org.getahead.dwrdemo.address.AddressLookup"/>
    </create>
  </allow>
</dwr>