Copying Billing Form Fields Into Shipping Fields
By Will Bontrager2005-05-11
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 -->The checkbox calls the FillFields() function whenever it is clicked, whether checked or unchecked.
<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 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.
Tutorial Pages:
» Copying Billing Form Fields Into Shipping Fields
» How To Do It
» Link Instead of Checkbox
Copyright 2004 Bontrager Connection, LLC
|
