Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

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

10 months 3 weeks ago #1

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

10 months 3 weeks ago #2

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

10 months 3 weeks ago #3

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

Regards,
Artem, Balbooa.com

2 months 3 days 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

2 months 3 days ago #5

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

2 months 3 days 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