Hide placer holder text in Adress Field

App Development
1

Hi,
I use the Adress field option, but the placeholder text is by default filled out & in English. Is there a way to disable this text or to change this to another language?

Kind regards,

2

@slimpens Is this like as your requirment ?

const locale = "fr";
const translations = {
  // English translations
  "en": {
    "address": "Please enter Address",
    "address2": "Please enter Address 2",
    "state": "Please enter State",
    "city": "Please enter City",
    "zip": "Please enter Zip",
    "country": "Please enter country ",
    "lat": "Please enter Latitude",
    "lng": "Please enter Longitude",
  },
  // Another translations
  "fr": {
    "address": "Veuillez entrer l'adresse",
    "address2": "Veuillez entrer l'adresse 2",
    "state": "Veuillez entrer l'état",
    "city": "Veuillez entrer la ville",
    "zip": "Veuillez saisir le code postal",
    "country": "Veuillez entrer le pays",
    "lat": "Veuillez entrer la latitude",
    "lng": "Veuillez saisir la longitude",
    
  },
};
TB.render('COMPONENT_ID', function(data) {
    translations_obj = translations[locale];
    data.ele.find( "input[class*=t-form-address-]" ).each(function( index ) {
        var str = [].slice.apply(this.classList).filter(function(s){
                return s.startsWith("t-form-address-");
        }).join("").replace("t-form-address-", "");
    
        if(translations_obj.hasOwnProperty(str)){
            $( this ).attr("placeholder", translations_obj[str]);
        }
    });
});

image
image1647×599 22.8 KB

2 Likes
3

Thanks @christopher93, very neat solution.

1 Like
4

@christopher93 @moe
Could it be that due to updates of the TB platform the above solution is not working anymore? This is the code which I hold but, it stays in English.

const locale = "fr";
const translations = {
  // English translations
  "en": {
    "address": "Please enter Address",
    "address2": "Please enter Address 2",
    "state": "Please enter State",
    "city": "Please enter City",
    "zip": "Please enter Zip",
    "country": "Please enter country ",
    "lat": "Please enter Latitude",
    "lng": "Please enter Longitude",
  },
  // Another translations
  "fr": {
    "address": "Veuillez entrer l'adresse",
    "address2": "Veuillez entrer l'adresse 2",
    "state": "Veuillez entrer l'état",
    "city": "Veuillez entrer la ville",
    "zip": "Veuillez saisir le code postal",
    "country": "Veuillez entrer le pays",
    "lat": "Veuillez entrer la latitude",
    "lng": "Veuillez saisir la longitude",
    
  },
};
TB.render('component_3', function(data) {
    translations_obj = translations[locale];
    data.ele.find( "field_3741[class*=t-form-address-]" ).each(function( index ) {
        var str = [].slice.apply(this.classList).filter(function(s){
                return s.startsWith("t-form-address-");
        }).join("").replace("t-form-address-", "");
    
        if(translations_obj.hasOwnProperty(str)){
            $( this ).attr("placeholder", translations_obj[str]);
        }
    });
});

adres
adres2120×394 18.6 KB

5

Any can help me clean this code?

7

@slimpens, the issue might be that you are using "field_3741[class*=t-form-address-]". Instead, you should use "input[class*=t-form-address-]"

1 Like
8

Thank you @christopher93