SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

    Code:
    <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

    Code:
    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());
                  
                    });
                }   
                
            }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •