Balbooa Help Center: Trick Tip: Displaying values from multiple text inputs in text input (1/1)

4 months 2 weeks ago #1

Artem
Posts: 10787

Hi there!

Here is a trick tip about how to display values from multiple text inputs in the text input

Demo:

Okay, we have 4 text inputs fields, results will be displaying in field 4.

Step 1. To each field add class suffixes:
- custom-field-1
- custom-field-2
- custom-field-3
- custom-field-4

Step 2. Add this code to the forms js editor

document.addEventListener('DOMContentLoaded', function(){
    let custom = {
        text: '{custom-field-1} {custom-field-2} {custom-field-3}',
        parts: ['custom-field-1', 'custom-field-2', 'custom-field-3'],
        target: 'custom-field-4',
        update: () => {
            let text = custom.text;
            custom.parts.forEach((part) => {
                let value = $f('.'+part).find('input, textarea').val();
                text = text.replace('{'+part+'}', value);
            });
            $f('.'+custom.target).find('input, textarea').val(text);
        },
    }

    custom.parts.forEach((part) => {
        $f('.'+part).on('input', 'input, textarea', custom.update)
    });
});

Step 3. Enjoy!

Regards,
Artem, Balbooa.com

4 months 2 weeks ago #2

alex Posts: 120	Thank you, creators, it works well. It would be great to have the inclusion of such a solution in the box. All the best, friends!
	Last Edit: 4 months 2 weeks ago by alex. The administrator has disabled public write access.

4 months 2 weeks ago #3

Artem Posts: 10787	Thank you for your kind words Regards, Artem, Balbooa.com
	The administrator has disabled public write access.