0

In order to control the input format in the ZIP code field in the dynamic address fields provided by the Address Field module (I use it in Drupal Commerce) I need to add the attributes onKeyUp and onBlur to this field. My plan is to use Javascript to manage the formatting, but I need to add the above attributes first. How do I do that? I imagine I should use hook_form_alter in my template.php, but I could need a pointer on how to do it.

if($form['#id'] === "edit-customer-profile-billing-commerce-customer-address-und-0-postal-code"){
  dsm($form); // devel message does not show up in the checkout page in question
  $form['#attributes']['onBlur'] = '(this)'; 
}

EDITED: I have now managed to add the attributes this way:

  function mytheme_form_alter(&$form, &$form_state, $form_id) {
    if($form_id === "commerce_checkout_form_checkout"){
      // Merge new attributes with existing ones.
      $form['customer_profile_billing']['commerce_customer_address']['und']['0']['locality_block']['postal_code']['#attributes'] = array(
        'onBlur' => 'setZip(this)',
        'onKeyUp' => 'setLimit(this,5)',
      );
      $form['customer_profile_shipping']['commerce_customer_address']['und']['0']['locality_block']['postal_code']['#attributes'] = array(
        'onBlur' => 'setZip(this)',
        'onKeyUp' => 'setLimit(this,5)',
      );
    }
  }

And this is the js script (I found it here):

(function($) {
        $(document).ready(function(){
            'use strict';
        var setZip, setLimit;
        console.log('outside');

        function setZip(theField){
          console.log('setzip');
          var num = theField.value.replace(/\D/g,"");
          theField.value = num.substr(0,3)+" "+num.substr(2);
        }

        function setLimit(theField, maxDigit){
          console.log('setlimit');
          var num = theField.value.replace(/\D/g,"");
          if(num>maxDigit){
            theField.value = theField.value.substr(0,maxDigit);
          }
        }

    });

})(jQuery);

The problem now is that I get a javascript reference error like this:

Uncaught ReferenceError: setZip is not defined at HTMLInputElement.onblur

I suspect this has something to do with the scope, so I have tried to place the js script with the setLimit and setZip functions in the header, in the body and in the footer, with the same error message. I also tried to remove the $(document).ready(function()... but the reference error reamins.

Any ideas?

3
  • The form ID will never be the HTML ID of an input buried somewhere in the form. The form alter has a $form_id param, use that to work out what the correct value is
    – Clive
    Commented Sep 13, 2017 at 8:49
  • Thanks, thanks to your pointer I now found out that the ID is commerce_checkout_form_checkout, but it does not seem to be an easy thing to add an attribute to a single field in this dynamic field group. I keep looking.
    – TBJ
    Commented Sep 13, 2017 at 9:01
  • Yeah the checkout pane fields are really heavily nested
    – Clive
    Commented Sep 13, 2017 at 9:02

1 Answer 1

0

In case anyone else has this same problem. I have learned that it's a better practise to only use Javascript with an addEventListener to do this job, due to the scope rules.

This is how I finally did it. Change the code to adapt the formatting to the standard format in your country. This one changes the ZIP code format to five digits with a space inserted between digit 3 and 4.

  if($("#edit-customer-profile-billing-commerce-customer-address-und-0-postal-code").length){
    document.getElementById("edit-customer-profile-billing-commerce-customer-address-und-0-postal-code").addEventListener("blur", function(){
        if(this.value.length>5 && /\s/.test(this.value)){
          this.value = this.value.substr(0,6);
        }   else if(this.value.length>5 && !(/\s/.test(this.value))){
                        this.value = this.value.substr(0,5);
                    }
        if(this.value.length===5 && this.value.substring(3,4) !== " "){
            this.value = this.value.split(/(?=.{2}$)/).join(' ');
        }
    });
}

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.