Page 1 of 1

CGBetterforms add dynamic fields - no submit

Posted: Thu May 07, 2020 10:03 am
by rednose
Hello

After years of using formbuilder, I changed now to CGBetterforms. CMSMS 2.2.14, CGBetterforms 1.10.4
Everything provided by the templates works fine.

Now I wanted to add dynamic input fields (add/remove a row ) to the form.

I used this little snippet, very basic and easy

Code: Select all

<__script__ type="text/javascript">
    // add row
    $("#addRow").click(function () {
        var html = '';
        html += '<div id="inputFormRow">';
        html += '<div class="input-group mb-3">';
        html += '<input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">';
        html += '<div class="input-group-append">';
        html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
        html += '</div>';
        html += '</div>';

        $('#newRow').append(html);
    });

    // remove row
    $(document).on('click', '#removeRow', function () {
        $(this).closest('#inputFormRow').remove();
    });

</__script>
and then this in my form template

Code: Select all

 <div class="row">
        <div class="col-lg-12">
            <div id="inputFormRow">
                <div class="input-group mb-3">
                    <input type="text" name="title[]" class="form-control m-input" placeholder="Enter title" autocomplete="off">
                    <div class="input-group-append">
                        <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
                    </div>
                </div>
            </div>

            <div id="newRow"></div>
            <button id="addRow" type="button" class="btn btn-info">Add Row</button>
        </div>
    </div>
The form itself on the website works fine. I can add and remove, wenn I look into the form information ( firefox webtool), the fields are there.
I have updated the handler and it shows

Code: Select all

{if !empty($title)}<p><strong>title:</strong> {implode(' + ',$title)}{$title}</p>{/if}
Also in the form templating help it's listed with

Code: Select all

title 	string[]
But when I submit, it doesn't show up in my email, nor in the flat cvs file.
The multiple string from a dropdown is submitted just fine.

Did I forgot something, or does the form need something more, to submit the string to my email?
I would appreciate some help or ideas.

Kind regards
Rednose

Re: CGBetterforms add dynamic fields - no submit

Posted: Thu May 07, 2020 1:58 pm
by DIGI3
CGBF isn't really built to handle dynamically-added fields. When you create the form template and scan it into the module, that's when it builds the list of fields etc that it handles. It can't know that they will be added later with js.

You can add options to a dropdown (for example) dynamically, but the actual input field with its name must be there during the form scan. At best, you could hide the fields then just set them to show dynamically, but you couldn't do an indefinite "add field" scenario.

Re: CGBetterforms add dynamic fields - no submit [solved]

Posted: Thu May 07, 2020 2:05 pm
by rednose
thank you for your quick answer. No problem, then I will change the form a little bt. But now I know at least that's not possible and can stop trying :-)

Have a nice day

Re: CGBetterforms add dynamic fields - no submit

Posted: Thu May 07, 2020 2:09 pm
by Jo Morg
Just for the record: that could have been easily done with FormBuilder.