Javascript OnSelect change field label

API & Customization
1

Hi I know I can dynamically show/hide fields of a form. Is there a way I can dynamically change the label of one field based on the selection of an item in another multi-choice field using Javascript? I have had a look at the examples on JavaScript & jQuery Examples but can’t quite grasp which bits to combine? Cheers! Mike

2

Hi @Mike7

You could do this by adding a change function to your multiple choice field which will get the selected result.

$('#view_xxxx-field_yyyy').change(function () {
       $('#kn-input-field_zzzz label').text($(this).val());
});

This will change the label to match the option selected in the dropdown.

If you would like to alter the text based on the multiple choice selected value you could add an if inside the change function.

// #view_xxxx is the view that the multiple choice is on and field_yyyy is the multiple choice field
$('#view_xxxx-field_yyyy').change(function () {
       if ($(`#view_xxxx-field_yyyy option:selected`).text() == 'Hello') {
           // zzzz is the field with label to change
           $('#kn-input-field_zzzz label').text('New Label Text Here');
       }
});

If you have lots of Ifs then you could use a case statement.

If you’d like any further help please let me know.

Craig

3

Wow many thanks Craig. I have added the code and updated the ids but it doesn’t seem to be running. Is there anything else I need to add to make it is triggered?

// #view_xxxx is the view that the multiple choice is on and field_yyyy is the multiple choice field
$(‘#view_217-field_289’).change(function () {

if ($(‘#view_217-field_289 option:selected’).text() == ‘Renewal’) {
// zzzz is the field with label to change
$(‘#kn-input-field_105 label’).text(‘Opportunity Id’);
}
else {
$(‘#kn-input-field_105 label’).text(‘Deal Reg Number’);
}
});

1 Like
4

Doh! I have answered my own question I was missing the

$(document).on(‘knack-view-render.view_217’, function(event, view, data) {

etc lol

It’s all working now - thank you!

1 Like
5

Brilliant I’m really glad you have got it working. I’ll make sure I add the trigger next time I answer a question.