Hi, I want to copy the postal address fields to the shipping address fields the following function along with XHTML brings up an error. function copy_shipping() { if (document.order.billcb.checked) { document.getElementById("order").shouseunit.value= document.getElementById("order").phouseunit.value; document.getElementById("order").sstreet.value= document.getElementById("order").pstreet.value; document.getElementById("order").ssuburb.value= document.getElementById("order").psuburb.value; document.getElementById("order").sstate.value= document.getElementById("order").pstate.value; document.getElementById("order").spostcode.value= document.getElementById("order").ppostcode.value; } } <form id="order"> <p>House or Unit number: <input type="text" name="phouseunit" maxlength="10" size="40"/> </p> <p>Street Name: <input type="text" name="pstreet" size="50" maxlength="20"/> </p> <p>Suburb: <input type="text" name="psuburb" size="50" maxlength="20"/> </p> <p>State: <input type="text" name="pstate" size="3" maxlength="3"/> </p> <p>Postcode: <input type="text" name="ppostcode" size="10" maxlength="4"/> </p> <p>Shipping address:</p> <p>Tick checkbox if same as postal address. </p> <p><input type="checkbox" name="billcb" value="check" onclick="copy_shipping();" /> </p> <p>House or Unit number: <input type="text" name="shouseunit" size="40" maxlength="10"/> </p> <p>Street Name: <input type="text" name="sstreet" size="50" maxlength="20" /> </p> <p>Suburb: <input type="text" name="ssuburb" size="50" maxlength="20"/> </p> <p>State: <input type="text" name="sstate" size="3" maxlength="3"/> </p> Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <script type="text/javascript"> function xferData(isForm,isChecked){ if (isChecked) { isForm.shipAddress.value = isForm.billAddress.value; isForm.shipCity.value = isForm.billCity.value isForm.shipState.selectedIndex = isForm.billState.selectedIndex; isForm.shipZip.selectedIndex = isForm.billZip.selectedIndex; isForm.shipBox.checked = isForm.billBox.checked; document.getElementById('sameInfo').style.display = ''; isForm.shipAddress.disabled = false; isForm.shipCity.disabled = false; isForm.shipState.disabled = false; isForm.shipZip.disabled = false; isForm.shipBox.disabled = false; } else { isForm.shipAddress.value = ""; isForm.shipCity.value = ""; isForm.shipState.selectedIndex = 0; isForm.shipZip.selectedIndex = 0; isForm.shipBox.checked = false; document.getElementById('sameInfo').style.display = 'none'; isForm.shipAddress.disabled = true; isForm.shipCity.disabled = true; isForm.shipState.disabled = true; isForm.shipZip.disabled = true; isForm.shipBox.disabled = true; } } </script> </head> <body> <form action=""> Bill To:<br> Address: <input type="text" size="15" name='billAddress'><br> City: <input type="text" size="15" name='billCity'><br> State: <select name='billState'> <option selected value=''> Make a Selection </option> <option value='California'> California </option> <option value='Texa'> Texas </option> </select><br> Zip: <select name='billZip'> <option selected value='0'> Make a Selection </option> <option value='12345'> 12345 </option> <option value='14523'> 14523 </option> </select><br> Some box: <input type="checkbox" name='billBox'><br> <br> Shipping Address Same As Billing Address? <input type="checkbox" onclick="xferData(this.form,this.checked)"><br> <br> <div id='sameInfo' class='c1' style="display:none"> Ship To:<br> Address: <input type="text" size="15" name='shipAddress' disabled readonly><br> City: <input type="text" size="15" name='shipCity' disabled readonly><br> State: <select name='shipState' disabled> <option selected value=''> Make a Selection </option> <option value='California'> California </option> <option value='Texa'> Texas </option> </select><br> Zip: <select name='shipZip' disabled> <option selected value='0'> Make a Selection </option> <option value='12345'> 12345 </option> <option value='14523'> 14523 </option> </select><br> Some box: <input type="checkbox" name='shipBox' disabled> </div> </form> </body> </HTML> Code (markup):
Your script has some errors "document.order has no properties". and there's no need to reformulate all your coding, it's simple and easily maintainable like it is. Just make a few changes. Instead of document.getElementById("order").shouseunit.value use document.getElementById("shouseunit").value and add id to every objects you need to use. Elements referred by ID need id value. Instead of document.order.billcb.checked use document.getElementById("billcb").value Don't forget to close your form tag. <script language="Javascript"> function copy_shipping() { if (document.getElementById("billcb").checked) { document.getElementById("shouseunit").value= document.getElementById("phouseunit").value; document.getElementById("sstreet").value= document.getElementById("pstreet").value; document.getElementById("ssuburb").value= document.getElementById("psuburb").value; document.getElementById("sstate").value= document.getElementById("pstate").value; document.getElementById("spostcode").value= document.getElementById("ppostcode").value; } } </script> <form id="order"> <p>House or Unit number: <input type="text" id="phouseunit" maxlength="10" size="40"/> </p> <p>Street Name: <input type="text" id="pstreet" size="50" maxlength="20"/> </p> <p>Suburb: <input type="text" id="psuburb" size="50" maxlength="20"/> </p> <p>State: <input type="text" id="pstate" size="3" maxlength="3"/> </p> <p>Postcode: <input type="text" id="ppostcode" size="10" maxlength="4"/> </p> <p>Shipping address:</p> <p>Tick checkbox if same as postal address. </p> <p><input type="checkbox" id="billcb" value="check" onclick="copy_shipping();" /> </p> <p>House or Unit number: <input type="text" id="shouseunit" size="40" maxlength="10"/> </p> <p>Street Name: <input type="text" id="sstreet" size="50" maxlength="20" /> </p> <p>Suburb: <input type="text" id="ssuburb" size="50" maxlength="20"/> </p> <p>State: <input type="text" id="sstate" size="3" maxlength="3"/> </p> </form> HTML: