Address Auto-Fill Ckeck Box

Javascript code that automatically fills in the address in all places needed on the page after just once entering it and selecting the check box.

Introduction:

I ran across this code when working on a registration product site. The goal is to save the user’s time by not having them fill in the same address over and over, if the address for there billing is the same as the mailing address.

You can view a working form by clicking here.

Source Code

<html>
<title></title>
<head>
<script type="text/javascript" language="javascript">
function set_billing(box)
{
var f = box.form, b_which = box.checked, from_el, to_el, i = 0;
var fld_name = new Array('city' , 'state');
while (from_el = f[fld_name[i]])
{
to_el = f['bill' fld_name[i ]];
to_el.value = b_which ? from_el.value : '';
if (to_el.readOnly != null)
to_el.readOnly = b_which ? true : false;
else to_el.onfocus = b_which ? function() {this.blur();
}
: null;
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td align="right">
<strong>Mailing Address</strong><br>
City: <input name="city" type="text" id="city" onchange="set_billing(billingaddrsame)"><br>
State: <input name="state" type="text" id="state" onchange="set_billing(billingaddrsame)"><br>
<strong>Billing Address</strong><br>
( same as above)
<input type="checkbox" name="billingaddrsame" onclick="set_billing(this)"><br>
City: <input name="billcity" type="text" id="billcity"><br>
State: <input name="billstate" type="text" id="billstate"><br>
</td>
</tr>
</table>
</form>
</body>
</html>

You may also like...

6 Responses

  1. jhankar says:

    hi;
    i am facing aproblem when the fills the form by using googles auto fill feature.in my form i have a country drop down and based on that i am showing states.it’s not working when the user comes from autofill is there any solution.plz let me know.
    “jhankar”(j_rayjit@hotmail.com)

  2. Andrew says:

    The sample source code has a slight error. Copy from the source code of the example page instead and it'll work fine!

    to_el = f['bill' fld_name[i ]]; // on this page

    to_el = f['bill' + fld_name[i++]]; // on working example page

  3. Andrew says:

    The sample source code has a slight error. Copy from the source code of the example page instead and it'll work fine!

    to_el = f['bill' fld_name[i ]]; // on this page

    to_el = f['bill' + fld_name[i++]]; // on working example page

  4. off1 says:

    You wrote productivaty 😉

  5. josh says:

    Also, make sure that ‘bill’ (or whatever you change it to) is the prefix to the names of your 2nd set of boxes.

    to_el = f[‘bill’ fld_name[i ]];

    if first set of boxes are named ‘city’ and ‘state’
    so 2nd set would be called ‘billcity’ and ‘billstate’

    also, make sure you put in your input names in here where ‘city’ and ‘state’ are:

    var fld_name = new Array(‘city’ , ‘state’);

    thanks for the code so i didnt have to write it myself!

  6. Linda says:

    I tried the code but when I click on the check box, the fields below do fill with the previous city and address. What am I doing wrong? Thanks

Leave a Reply