Checkout – jQuery Returning Undefined for Value in Billing Step

billingcheckoutjavascriptundefined variable

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?

Best Answer

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.

Related Topic