In this tutorial we'll show how you can change field labels on Add/Edit pages on the fly. We are going to use Chrome Developer Tools and jQuery for this purpose.
Proceed to the Add page, right click on any field label and choose 'Inspect element'. You will see something like this:
Here you can see that this specific TR element has attribute named data-fieldname equals 'Address1'. 'Address1' is our field name.
$("tr[data-fieldname='Address1']")
Now we need to dig a little deeper to access the first TD element that belongs to this table row.
Here is the jQuery expression that gets us there.
$("tr[data-fieldname='Address1'] td:first-child")
Now we can change the text of that label using jQuery's text() function:
$("tr[data-fieldname='Address1'] td:first-child").text("Street name");
The great thing about Developers Tools is that it comes with the console where you can type your commands and get an immediate feedback. Here is how do you test jQuery expressions:
