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

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?

  • What happens when you place jQuery('#billing\\:aitoc_checkout_967') into the console? Does it return the element?
    – Dave
    Commented Jul 3, 2014 at 10:43
  • it returns [object Object] Commented Jul 3, 2014 at 11:35
  • is there a little arrow to expand that? (Depending on the browser) you should see the element. Also I presume it's a text input field?
    – Dave
    Commented Jul 3, 2014 at 11:36
  • using chrome developer tools. I can't see an arrow... And yes all fields that don't work are input fields Commented Jul 3, 2014 at 11:54
  • played around, check my answer below.
    – Dave
    Commented Jul 3, 2014 at 12:52

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

  • Ok I finally got it working. Important thing was to add that extra white space at the end. Was not seeing this at the beginning. And also only add this for the input fields, not the select. Thanks a lot! Commented Jul 4, 2014 at 10:23
  • @user3432078 I only just noticed the extra white space... How weird! Must of happened when I copied the ID. Probably an issue with the extension adding that extra white space. Glad you've solved it!
    – Dave
    Commented Jul 4, 2014 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.