When you tab out of the "postcode" field the browser calls the onchange event, which calls the fillAddress()
function:
function
fillAddress()
...
{
varpostcode=dwr.util.getValue("postcode");
AddressLookup.fillAddress(postcode,function(address)...{
dwr.util.setValues(address);
});
}
varpostcode=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
MapfillAddress(Stringorigpostcode)
... {
Mapreply=newHashMap();
Stringpostcode=LocalUtil.replace(origpostcode,"","");
if(postcode.equalsIgnoreCase("LE167TR"))
...{
reply.put(LINE2,"ChurchLane");
reply.put(LINE3,"ThorpeLangton");
reply.put(LINE4,"MARKETHARBOROUGH");
}
...
else
...{
reply.put(LINE2,"Postcodenotfound");
reply.put(LINE3,"");
reply.put(LINE4,"");
}
returnreply;
}
... {
Mapreply=newHashMap();
Stringpostcode=LocalUtil.replace(origpostcode,"","");
if(postcode.equalsIgnoreCase("LE167TR"))
...{
reply.put(LINE2,"ChurchLane");
reply.put(LINE3,"ThorpeLangton");
reply.put(LINE4,"MARKETHARBOROUGH");
}
...
else
...{
reply.put(LINE2,"Postcodenotfound");
reply.put(LINE3,"");
reply.put(LINE4,"");
}
returnreply;
}
HTML source:
<
table
>
< tr >
< td > Zipcode/Postcode: </ td >
< td >< input id ="postcode" type ="text" onchange ="fillAddress()" /></ td >
</ tr >
< tr >
< td > Housename/number: </ td >
< td >< input id ="house" type ="text" /></ td >
</ tr >
< tr >
< td > Line2: </ td >
< td >< input id ="line2" type ="text" /></ td >
</ tr >
< tr >
< td > Line3: </ td >
< td >< input id ="line3" type ="text" /></ td >
</ tr >
< tr >
< td > Line4: </ td >
< td >< input id ="line4" type ="text" /></ td >
</ tr >
</ table >
< tr >
< td > Zipcode/Postcode: </ td >
< td >< input id ="postcode" type ="text" onchange ="fillAddress()" /></ td >
</ tr >
< tr >
< td > Housename/number: </ td >
< td >< input id ="house" type ="text" /></ td >
</ tr >
< tr >
< td > Line2: </ td >
< td >< input id ="line2" type ="text" /></ td >
</ tr >
< tr >
< td > Line3: </ td >
< td >< input id ="line3" type ="text" /></ td >
</ tr >
< tr >
< td > Line4: </ td >
< td >< input id ="line4" type ="text" /></ td >
</ tr >
</ table >
Javascript source:
function
fillAddress()
...
{
varpostcode=dwr.util.getValue("postcode");
AddressLookup.fillAddress(postcode,function(address)...{
dwr.util.setValues(address);
});
}
varpostcode=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
... {
privatestaticfinalStringLINE4="line4";
privatestaticfinalStringLINE3="line3";
privatestaticfinalStringLINE2="line2";
publicMapfillAddress(Stringorigpostcode)
...{
Mapreply=newHashMap();
Stringpostcode=LocalUtil.replace(origpostcode,"","");
if(postcode.equalsIgnoreCase("LE167TR"))
...{
reply.put(LINE2,"ChurchLane");
reply.put(LINE3,"ThorpeLangton");
reply.put(LINE4,"MARKETHARBOROUGH");
}
elseif(postcode.equalsIgnoreCase("NR147SL"))
...{
reply.put(LINE2,"RectoryLane");
reply.put(LINE3,"Poringland");
reply.put(LINE4,"NORWICH");
}
elseif(postcode.equalsIgnoreCase("B927TT"))
...{
reply.put(LINE2,"OltonMere");
reply.put(LINE3,"WarwickRoad");
reply.put(LINE4,"SOLIHULL");
}
elseif(postcode.equalsIgnoreCase("E178YT"))
...{
reply.put(LINE2,"");
reply.put(LINE3,"POBox43108");
reply.put(LINE4,"LONDON");
}
elseif(postcode.equalsIgnoreCase("SN48QS"))
...{
reply.put(LINE2,"Binknoll");
reply.put(LINE3,"WoottonBassett");
reply.put(LINE4,"SWINDON");
}
elseif(postcode.equalsIgnoreCase("NN57HT"))
...{
reply.put(LINE2,"Heathville");
reply.put(LINE3,"");
reply.put(LINE4,"NORTHAMPTON");
}
else
...{
reply.put(LINE2,"Postcodenotfound");
reply.put(LINE3,"");
reply.put(LINE4,"");
}
returnreply;
}
}
import java.util.HashMap;
import java.util.Map;
import org.directwebremoting.util.LocalUtil;
public class AddressLookup
... {
privatestaticfinalStringLINE4="line4";
privatestaticfinalStringLINE3="line3";
privatestaticfinalStringLINE2="line2";
publicMapfillAddress(Stringorigpostcode)
...{
Mapreply=newHashMap();
Stringpostcode=LocalUtil.replace(origpostcode,"","");
if(postcode.equalsIgnoreCase("LE167TR"))
...{
reply.put(LINE2,"ChurchLane");
reply.put(LINE3,"ThorpeLangton");
reply.put(LINE4,"MARKETHARBOROUGH");
}
elseif(postcode.equalsIgnoreCase("NR147SL"))
...{
reply.put(LINE2,"RectoryLane");
reply.put(LINE3,"Poringland");
reply.put(LINE4,"NORWICH");
}
elseif(postcode.equalsIgnoreCase("B927TT"))
...{
reply.put(LINE2,"OltonMere");
reply.put(LINE3,"WarwickRoad");
reply.put(LINE4,"SOLIHULL");
}
elseif(postcode.equalsIgnoreCase("E178YT"))
...{
reply.put(LINE2,"");
reply.put(LINE3,"POBox43108");
reply.put(LINE4,"LONDON");
}
elseif(postcode.equalsIgnoreCase("SN48QS"))
...{
reply.put(LINE2,"Binknoll");
reply.put(LINE3,"WoottonBassett");
reply.put(LINE4,"SWINDON");
}
elseif(postcode.equalsIgnoreCase("NN57HT"))
...{
reply.put(LINE2,"Heathville");
reply.put(LINE3,"");
reply.put(LINE4,"NORTHAMPTON");
}
else
...{
reply.put(LINE2,"Postcodenotfound");
reply.put(LINE3,"");
reply.put(LINE4,"");
}
returnreply;
}
}
dwr.xml
<?
xmlversion="1.0"encoding="UTF-8"
?>
<! DOCTYPEdwrPUBLIC
"-//GetAheadLimited//DTDDirectWebRemoting2.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 >
<! DOCTYPEdwrPUBLIC
"-//GetAheadLimited//DTDDirectWebRemoting2.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 >