Jquery Copy Billing/Shipping IE7 OE Error

Hello,

I have created a form that includes billing and shipping information. When the user clicks the checkbox next to “Shipping Information is the same as Billing Information” the form should copy the contents filled in the shipping fields to the billing fields. All works well, except in Internet Explorer 7, I get an object expected error. I’m using jQuery JavaScript Library v1.4.2.

Any assistance or insight into fixing this issue would be greatly appreciated.


<div class="box1 store-customer-info">
    <h1>Checkout - Step 2 of 3</h1>
		
<div class="records">
	<h3>Please <span>enter your billing and shipping information</span></h3>

  <div class="record">
    <div class="body">
			Please enter your billing and shipping information below to continue your purchase.
		</div>
  </div>
</div>

		
    <div class="records">
        <div class="record">
            <form action="#" method="post" name="checkout" id="checkout" class="form">

            	
				
<h3>Billing Information</h3>
                <fieldset>
                <div class="short"><label for="billFirst">First Name<span class="red">*</span></label>
                      <input class="required" id="bill_first" name="bill[first]" size="21" tabindex="2" type="text" />
                      
                  </div>
                  <div class="short"><label for="billLast">Last Name<span class="red">*</span></label>

                    <input class="required" id="bill_last" name="bill[last]" size="21" tabindex="3" type="text" />
                    
                  </div>
          <div  class="short">
          <label for="billPhone">Phone<span class="red">*</span></label>
                    <input class="required" id="bill_phone" name="bill[phone]" size="21" tabindex="4" type="text" />
                    
                  </div>
                  <div class="short"><label for="billEmail">Email<span class="red">*</span></label>

                    <input class="required" id="bill_email" name="bill[email]" size="21" tabindex="5" type="text" />
                    
                  </div>
          <div  class="short">
                  <label for="billAddress1">Address<span class="red">*</span></label>
                    <input class="required" id="bill_address1" name="bill[address1]" size="21" tabindex="6" type="text" /> <br /><label class="no-float">(No PO Boxes.  A physical address is needed.)</label>
                    
                  </div>
                  <div class="short"><label for="billAddress2">Address 2</label>

                    <input class="" id="bill_address2" name="bill[address2]" size="21" tabindex="7" type="text" />
                    
                  </div>
                  <div><label for="billCity">City<span class="red">*</span></label>
                    <input class="required" id="bill_city" name="bill[city]" size="21" tabindex="8" type="text" />
                  </div>
                  <div>
          <label for="billZip">Zip Code<span class="red">*</span></label>
                    <input class="required" id="bill_postal_code" name="bill[postal_code]" size="21" tabindex="10" type="text" />
                    
                  </div>
          <div>
          <label for="province">Other State / Province</label>
                    <input id="bill_province" name="bill[province]" size="21" tabindex="11" type="text" />

                    
                  </div>
          <h3>Shipping Information</h3>
                <div><input id="sameAddress" tabindex="14"
                            value="sameAddress"
                            name="sameAddress"
                            type="checkbox"
                            onclick="return billToShip();" /><label for="sameAddress" class="no-float">Shipping Information is the same as Billing Information</label></div>

        </fieldset>
               <fieldset>
                <div class="short">
        <label for="shipFirst">First Name<span class="red">*</span></label>
                      <input class="required" id="ship_first" name="ship[first]" size="21" tabindex="15" type="text" />
                      
                   </div>
           <div class="short">
         <label for="shipLast">Last Name<span class="red">*</span></label>

                      <input class="required" id="ship_last" name="ship[last]" size="21" tabindex="16" type="text" />
                      
                   </div>
           <div class="short">
           <label for="shipPhone">Phone<span class="red">*</span></label>
                      <input class="required" id="ship_phone" name="ship[phone]" size="21" tabindex="17" type="text" />
                      
                  </div>
                  <div class="short"><label for="shipEmail">Email<span class="red">*</span></label>

                      <input class="required" id="ship_email" name="ship[email]" size="21" tabindex="18" type="text" />
                      
                  </div>

           <div class="short">
           <label for="shipAddress1">Address<span class="red">*</span></label>
                      <input class="required" id="ship_address1" name="ship[address1]" size="21" tabindex="19" type="text" /> <br /><label  class="no-float">(No PO Boxes.  A physical address is needed.)</label>
                      
                  </div>

                  <div class="short"><label for="shipAddress2">Address 2</label>
                      <input class="" id="ship_address2" name="ship[address2]" size="21" tabindex="20" type="text" />
                      
                  </div>
          <div>
          <label for="shipCity">City<span class="red">*</span></label>
                      <input class="required" id="ship_city" name="ship[city]" size="21" tabindex="21" type="text" />
                      
                </div>

        <div>
        <label for="shipState">State / Province<span class="red">*</span></label>
        </div>
          <div>
          <label for="shipZip">Zip Code<span class="red">*</span></label>
                      <input class="required" id="ship_postal_code" name="ship[postal_code]" size="21" tabindex="23" type="text" />
                      
                  </div>
          <div>

            <label for="shipOtherState">Other State / Province</label>
                      <input id="ship_province" name="ship[province]" size="21" tabindex="24" type="text" />
                      
                 </div>
               </fieldset>



	 
              <div>&#xa0;</div>
              <input tabindex="16" value="Submit" name="Submit" type="submit" class="button submit"/>
              <input tabindex="17" value="Reset" name="Reset" type="reset" class="button reset" />
            </form>
          </div>  
       
      </div>	
</div>

Javascript/Jquery


function billToShip() {
    
            if (document.checkout.sameAddress.checked) { 
                jQuery("#checkout input").each(function() {
                    jQuery("#checkout input[id='" + jQuery(this).attr("id").replace(/bill/, "ship") + "']").val(jQuery(this).val());
              
                });
            }   
            
        }

In a primitive test that I ran up it seems to work right down to IE6 and IE7.
Can you link us to a version of it that demonstrates the problem? There may be something else about the page that’s causing the problem.