Rename the address field "Province / Region"

Knack Community
1

Hi, I’ve used this JS code from 2017 to rename some of the Address fields:

https://forums.knack.com/t/java-script-to-rename-zip-with-postcode-for-address-field/7253

but I also want to change the field “Province / Region” to “State” for Australian use.

I tried to add the line “$(”.kn-input-address label[for=‘province / region’]“).text(“State”);” at the end but it does not work. I also tried with double quotes $(“.kn-input-address label[for=‘“province / region”’]”).text(“State”); and also wild cards but without success.

Any ideas or suggestions please?

Thanks.

2

Close @NickF if you inspect the field the ‘for’ data is actually ‘state’ - some irony there!
So the code should be:

$(".kn-input-address label[for='state']").text('State');
2 Likes
3

Thanks Brad! Yes I wouldn’t have guessed that one. Where do I find the real field names?

Also this question follows on, or should I create a new post? I have two Address fields, one for the street address and the second for the postal address. Is it possible to rename one state field as “Postal State” and leave the other as is? At the moment, the code is ‘one size fits all’. I would do the same for Suburb and Postcode too.

4

Oh this post has made my morning Thank you @BradStevens for the solution and @NickF for raising it.
I struggled with this State issue about 6 months ago and gave up trying to change it! :frowning:

(Yes, the irony that we need to change the label for the address “state” field back to ‘State’, haha.)

Looking good now!

image
image914×1008 20.3 KB

for reference - code snippet for Aussie addresses 
$(document).on('knack-view-render.any', function(event, scene, view, data) {
// optional  $(".kn-input-address label[for='city']").text("Suburb"); 
$(".kn-input-address label[for='state']").text('State');
$(".kn-input-address label[for='zip']").text("Postcode");
});```
1 Like
5

Hey @NickF should be possible - comes down to targeting the right CSS selector and I’d encourage anyone dabbling in CSS and JS with Knack to read through knack’s help page Identifying Elements to Change.

So a stab at two different fields and to vary the text based on inspecting a form of mine with address fields:

$("#kn-input-field_XX.kn-input-address label[for='state']").text('State');
$("#kn-input-field_YY.kn-input-address label[for='state']").text('Postal State');

Change the XX and YY to your field numbers and sing out if that doesn’t work - a screenshot of your HTML selectors would be the next step.

6

In case its of use, here is the all the fields in the address block:

$(document).on(‘knack-scene-render.any’, function(event, scene) {
$(“.kn-input-address label[for=‘street2’]”).text(“Unit or Building”);
$(“.kn-input-address label[for=‘city’]”).text(“Suburb or City”);
$(“.kn-input-address label[for=‘zip’]”).text(“Postcode”);
$(“.kn-input-address label[for=‘state’]”).text(“STATE”);
});

except for the first one, which i assume is Street or Street1

7

Thank you!