[Resolved] repeating a field row

[Author]

Posts

[herbie4]

I would like to have a row of multiple fields in my frontend form that can be repeated. Is this possible?
See my screenshot as an example.

[Nigel]

Hi Herbie

Support for repeating field groups are added in Types 3.0 (currently in beta) with a nice UI for entering multiple sets of fields.

However, it is currently only available on the back-end with Types. Adding this to CRED front-end forms didn't make the cut-off for features for the initial release.

It is a priority, though, and adding support for repeating field groups in front-end forms will be worked on once the stable versions of the plugins are published in 2-3 weeks.

It is not really possible with the current versions, so I'm afraid there is little alternative but to wait, using Types 3.0 and repeating field groups in the backend in the meantime.

[herbie4]

Okay, but I am not looking for the new feature.
I just need to know if when using a standard field (with multiple options selected) can some how be combined to act as a row instead of a some single fields. Can I accomplish this with javascript some how in the cred form?

[Nigel]

Sorry, I'm not sure I really understand what you are aiming for.

If you have a repeating field added to a CRED form you will see the input for the first instance of the field and a button to add another beneath it. Click the button and another input is added, and you can keep repeating this.

You start with one field, and—with user intervention to click a button—add more fields as required.

You want that they should be added in a horizontal row rather than beneath each other?

There isn't any way to specify in advance when the form loads how many field instances should be shown, you start with one and add them as required.

I can imagine that you could fake pressing the button with JS several times to add extra field instances, is that the kind of thing you mean?

[herbie4]

Hi Nigel,
Thank you for the quick reply.
Yes I would like the first field of a row to only show the 'plus' or 'delete' sign and have some fields in a row all at the same create a new row. Should be able to do that with jquery/javascript. Do you have some ppointers how to achieve this?

[Nigel]

Hi Herbie

The existing functionality for adding additional fields is not amenable to modification, it is designed to work in a particular way where you add one extra field at a time, with icons for deleting or re-ordering individual instances.

If you want this to work differently you will need to replace it rather than try to modify it.

Which means adding the field to your CRED form and using CSS to hide the existing + Add new button so that the current Toolset functionality isn't used, as well as hiding the draggable icon with CSS as it won't be applicable in your scenario.

You will need to examine the structure of the markup that is added by the existing functionality so that you can reproduce it.

Here is a sample from a test site of my for a simple-text repeating field (that corresponds to the screenshot).

<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive ui-sortable" data-initial-conditional="" data-item_name="textfield-wpcf-simple-text">

    <div class="wpt-repctl wpt-repctl-flex">
        <div class="wpt-repetitive-controls"><span role="button" class="js-wpt-repdrag wpt-repdrag dashicons dashicons-move ui-sortable-handle" style="opacity: 1; cursor: move; display: inline-block;"></span><span role="button" class="js-wpt-repdelete wpt-repdelete dashicons-before dashicons-trash" title="Delete Simple text repetition" style="display: inline;"></span>
        </div>
        <div class="wpt-repetitive-field">
            <input type="text" id="cred_form_44_1-textfield-2-1525082903" name="wpcf-simple-text[0]" value="" class="form-control wpt-form-textfield form-textfield textfield" output="bootstrap" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" data-wpt-type="textfield" data-wpt-id="cred_form_44_1_cred_form_44_1-textfield-2-1525082903" data-wpt-name="wpcf-simple-text">
        </div>
    </div>

    <div class="wpt-repctl wpt-repctl-flex">
        <div class="wpt-repetitive-controls"><span role="button" class="js-wpt-repdrag wpt-repdrag dashicons dashicons-move ui-sortable-handle" style="opacity: 1; cursor: move;"></span><span role="button" class="js-wpt-repdelete wpt-repdelete dashicons-before dashicons-trash" title="Delete Simple text repetition"></span></div>
        <div class="wpt-repetitive-field">
            <input type="text" id="wpt-form-el1" name="wpcf-simple-text[1]" value="" class="form-control wpt-form-textfield form-textfield textfield" output="bootstrap" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" data-wpt-type="textfield" data-wpt-id="cred_form_44_1_cred_form_44_1-textfield-3-1525082903" data-wpt-name="wpcf-simple-text">
        </div>
    </div>

    <div class="wpt-repctl wpt-repctl-flex">
        <div class="wpt-repetitive-controls"><span role="button" class="js-wpt-repdrag wpt-repdrag dashicons dashicons-move" style="opacity: 1; cursor: move;"></span><span role="button" class="js-wpt-repdelete wpt-repdelete dashicons-before dashicons-trash" title="Delete Simple text repetition"></span></div>
        <div class="wpt-repetitive-field">
            <input type="text" id="wpt-form-el2" name="wpcf-simple-text[2]" value="" class="form-control wpt-form-textfield form-textfield textfield" output="bootstrap" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" data-wpt-type="textfield" data-wpt-id="cred_form_44_1_cred_form_44_1-textfield-3-1525082903" data-wpt-name="wpcf-simple-text">
        </div>
    </div>

    <div class="wpt-repctl wpt-repctl-flex" style="">
        <div class="wpt-repetitive-controls"><span role="button" class="js-wpt-repdrag wpt-repdrag dashicons dashicons-move" style="opacity: 1; cursor: move;"></span><span role="button" class="js-wpt-repdelete wpt-repdelete dashicons-before dashicons-trash" title="Delete Simple text repetition"></span></div>
        <div class="wpt-repetitive-field">
            <input type="text" id="wpt-form-el3" name="wpcf-simple-text[3]" value="" class="form-control wpt-form-textfield form-textfield textfield" output="bootstrap" preset_value="" urlparam="" value_escape="" make_readonly="" placeholder="" data-wpt-type="textfield" data-wpt-id="cred_form_44_1_cred_form_44_1-textfield-3-1525082903" data-wpt-name="wpcf-simple-text">
        </div>
    </div>

	<a role="button" class="js-wpt-repadd wpt-repadd dashicons-before dashicons-plus-alt" data-wpt-type="textfield" data-wpt-id="cred_form_44_1_wpcf-simple-text">Add new</a>
</div>

So you will be cloning the last div with class="wpt-repctl wpt-repctl-flex" several times to create a new row, updating the input element attributes each time as required. Note that the initial input inserted in the form has a distinct format for the id, but the subsequent fields all follow a predictable pattern.

It can be done, the key point being that you need to write you own version of the JS for handling repeating fields rather than try to modify the plugin's own JS, there is no API for you to customise this.

It's not something I can write for you, I'm afraid.

[herbie4]

Hello Nigel,

Thank you for pointing me in the right direction. I will see if I can use this set up or find a different solution to the problem.
Thanks again for the great support.

Best regards, hrbrt