How to change an item's LABEL and Placeholder dynamically using a Dynamic Action

Share on:

How to change an item’s LABEL and Placeholder dynamically using a Dynamic Action

preview

To change ITEM labels and placeholders we can try some JavaScript way to do so.

Look around the item structure

 1<div class="t-Form-fieldContainer t-Form-fieldContainer--floatingLabel lto22054361480113804944_0 
 2apex-item-wrapper apex-item-wrapper--text-field" id="P23_ITEM_CONTAINER">
 3<div class="t-Form-labelContainer">
 4<label for="P23_ITEM" id="P23_ITEM_LABEL" class="t-Form-label">Item Label</label>
 5</div>
 6<div class="t-Form-inputContainer">
 7<div class="t-Form-itemWrapper">
 8<input type="text" id="P23_ITEM" name="P23_ITEM" class="text_field apex-item-text" value="" size="30" maxlength="" placeholder="Place holder">
 9</div>
10<span id="P23_ITEM_error_placeholder" class="a-Form-error" data-template-id="43560868265522695231_ET">
11</span>
12</div>
13</div>

Now we need to look Label and placeholder changes respectively.

To change Item Label

1 $('#P23_ITEM_LABEL').text($v('P23_LABEL_TEXT'));

Item Label

To change Item placeholder

1 $('#P23_ITEM_2').attr("placeholder", $v('P23_PLACE_HOLDER_TEXT'));

Item placeholder

Demo

Item placeholder