Copying Billing Form Fields Into Shipping Fields
This technique is commonly used on professional order forms.
It lets customers click something to automatically fill in
shipping information without retyping identical information
already provided in billing form fields. Or vice versa.
Its use need not be limited to only that. Examples of other
uses are:
Use it for form fields that could require information
identical to that already provided elsewhere on the form.
A click is easier than retyping information.
How To Do It
Below is a working example. Paste it into a test web page
to try it out.
The example contains a form and the JavaScript to do the
automatic copying from fields to other fields. The
JavaScript can be anywhere on the web page — above the
form, below the form, or even in the HEAD area.
<!-- Example begin -->
<form name="ME">
Billing Name:
<input type="text" name="billname">
<br>Billing Address:
<input type="text" name="billaddy">
<br>Billing City:
<input type="text" name="billcity">
<br>Billing Province:
<input type="text" name="billstate">
<br>Billing Code:
<input type="text" name="billcode">
<br><br>
<input type="checkbox" onclick="FillFields(this)">
Check box to copy billing info into shipping.
<br>
<br>Shipping Name:
<input type="text" name="shipname">
<br>Shipping Address:
<input type="text" name="shipaddy">
<br>Shipping City:
<input type="text" name="shipcity">
<br>Shipping Province:
<input type="text" name="shipstate">
<br>Shipping Code:
<input type="text" name="shipcode">
<br><br>
<input type="submit">
</form>
<script type="text/javascript" language="JavaScript">
<!--
function FillFields(box) {
if(box.checked == false) { return; }
document.ME.shipname.value = document.ME.billname.value;
document.ME.shipaddy.value = document.ME.billaddy.value;
document.ME.shipcity.value = document.ME.billcity.value;
document.ME.shipstate.value = document.ME.billstate.value;
document.ME.shipcode.value = document.ME.billcode.value;
}
//-->
</script>
<!-- Example end -->
The checkbox calls the FillFields() function whenever it
is clicked, whether checked or unchecked.
The first line of the FillFields() function determines
whether or not the checkbox is checked. If not, it returns
without doing anything. But if it is checked, it proceeds
to do the copying.
Each of the rest of the lines of the FillFields() function
copies the content of the form field on the right of the
equal sign character and pastes it into the form field on
the left of the equal sign.
"ME" is the form name. The form field name is between the
two period characters following ME.
To customize the JavaScript, simply change the form name
and form field names to work with your form, adding or
removing lines as necessary.
Link Instead of Checkbox
If you prefer to have a link to click for filling in the
shipping fields, instead of a checkbox, two changes need
to be made:
-
Replace the checkbox form field with:
<a href="javascript:FillFields()">
Copy billing info into shipping.
</a>
-
Remove the first line of the FillFields() function:
if(box.checked == false) { return; }
Ease of use is a mark of professionalism.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
