Huge Performance Improvements, CSS Units and More

Joomla Wesbite Builder Gridbox with Performance Improvements and CSS Units
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Trick Tip: Displaying values from multiple text inputs in text input

4 months 2 weeks ago #1

  • Artem's Avatar
  • 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's Avatar
  • 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!

4 months 2 weeks ago #3

  • Artem's Avatar
  • Artem
  • Posts: 10787
Thank you for your kind words :)

Regards,
Artem, Balbooa.com
Powered by Kunena Forum