jQuery returning undefined for value in billing step on checkout

Question

I use an extension, with which I broke down the checkout to 3/4 steps (logged in/ not logged in): 1. billing 2. payment method 3. order review

In billing the customer is asked for the first name & last name, email, street, region from a custom dropdown and phone number. Those are the things I need to know. In order to get paypal to work, I need to send more information which is required from paypal, otherwise it won't work. So I have the mentioned form (which are all custom attributes from the extension) and I have the default fields from the magento form, which I want to hide. When the customer clicks on continue in billing step, I create that address information on the fly and paste them into the required, hidden magento fields.

Here is a simple fiddle to see what I mean. In this fiddle everything works fine.

But in magento this doesn't work. This is my function

function checkFields(event) {       
//returns undefined
// var company = jQuery('input#billing\\:aitoc_checkout_967').val();
var company = 'LW';  // working

//returns undefined
// var address = jQuery('#billing\\:aitoc_checkout_968').val();  
var address = 'Street1';  // working

//working!?! this is a select, not an input field like the others   
var bezirk = getNameFromId(jQuery('#billing\\:aitoc_checkout_966').val()); 
var city = 'MyCity' + bezirk;

var region = 80   // working
var country = 'DE'  // working
var postcode = '12345';  // working

//returns undefined
// var tel = jQuery('#billing\\:aitoc_checkout_969').val();
var tel = '654654';  // working     

// writing the values into the hidden fields
jQuery('#billing\\:company').val(company);
jQuery('#billing\\:street1').val(address);
jQuery('#billing\\:city').val(city);
jQuery('#billing\\:region_id').val(region);
jQuery('#billing\\:country_id').val(country);
jQuery('#billing\\:postcode').val(postcode);
jQuery('#billing\\:telephone').val(tel);
}

When I hardcode the values for telephone, address and company and click continue the fields are filled and customer is forwarded to next step. If I want to get the values for the inputfields via jQuery jQuery('#billing\\:aitoc_checkout_969').val() console alsways returns undefined. No matter what I write into that inputfield it's always undefined. It is working for select element though. The line var bezirk = getNameFromId(jQuery('#billing\\:aitoc_checkout_966').val()); gives me the right option value and writes it correctly into the hidden fields...

I'm out of ideas. What could cause this behaviour?

Answer 1

Looking at your site there seems to be something weird happening when you're using // in your ID selector.

Try the following code instead, you'll need to update all instances of elements with a colon.

jQuery('[id="billing:aitoc_checkout_967 "]')

From your site it seems to find the element successfully.