Remember me

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

1 year 8 months ago #1

  • Artem's Avatar
  • Artem
  • Posts: 11342
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

1 year 8 months ago #2

  • alex's Avatar
  • alex
  • Posts: 162
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!

1 year 8 months ago #3

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

Regards,
Artem, Balbooa.com

11 months 3 weeks ago #4

  • David's Avatar
  • David
  • Posts: 32
Hello Artem,
I have added this trick tip to my form and it works very well. Thanks a lot! However, it doesn't work once you compress HTML in Gridbox. Is this a bug or does it just not work when you compress HTML?

best regards,
David

11 months 3 weeks ago #5

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hello David,

Usually, when the code is not working after compression - I can only recommend you to check all your custom code on the site (Gridbox and Forms code editors) and be sure that the code doesn't include errors, for example not closed, or without quotes

Regards,
Artem, Balbooa.com

11 months 3 weeks ago #6

  • David's Avatar
  • David
  • Posts: 32
Hi Artem,
thank you for your answer.

I do not use any other java script custom code neither in Forms nor in Gridbox. However I use custom css code in Gridbox. Even if I remove that code, I don't see any change.

I use the code you provided in forms and it works well if HTML is not compressed. I have not made any changes to it.

I provide screenshots of any custom code I use in Forms and Gridbox. I cant find any errors.
Attachments:
Powered by Kunena Forum