Dynamic Address Entry Demo

[ 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.

- Demo
- How it works
- Source

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:

- LE16 7TR
- NR14 7SL
- B92 7TT
- E17 8YT
- SN4 8QS
- NN5 7HT

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>