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;
}
<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>
function fillAddress() {
var postcode = dwr.util.getValue("postcode");
AddressLookup.fillAddress(postcode, function(address) {
dwr.util.setValues(address);
});
}
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;
}
}
<?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>