Question

I am trying to create a plugin, in which i wanna use repeatable input fields in the settings page. I have found many sample codes online regarding repeatable input fields but only for post/page edit screen.

My code is here: http://pastebin.com/fiktsMrS

As you might see, i am using ‘static’ input fields

<!-- Textbox Control -->
<tr><th scope="row">Track 1</th><td><input type="text" size="200" name="fr_options[txt_1]" value="<?php echo $options['txt_1']; ?>" /></td></tr>
<tr><th scope="row">Track 2</th><td><input type="text" size="200" name="fr_options[txt_2]" value="<?php echo $options['txt_2']; ?>" /></td></tr>
<tr><th scope="row">Track 3</th><td><input type="text" size="200" name="fr_options[txt_3]" value="<?php echo $options['txt_3']; ?>" /></td></tr>
<tr><th scope="row">Track 4</th><td><input type="text" size="200" name="fr_options[txt_4]" value="<?php echo $options['txt_4']; ?>" /></td></tr>
<tr><th scope="row">Track 5</th><td><input type="text" size="200" name="fr_options[txt_5]" value="<?php echo $options['txt_5']; ?>" /></td></tr>

While all i want to do is have one input field, and an +ADD button next to it, which will create another one, and when i click save changes, it saves all the values of all the inputs.

Something similar can be found here but it seems too complicated when i only want one repeatable input field.

Answer 1

The PHP

$output = '<div class="repeatable-wrap">' .
    '<ul id="tracks-repeatable" class="repeatable-fields-list">';
if ( ! empty( $options ) ) {
    $i = 1;
    foreach( $options as $option ) {
        $output .= '<li>' .
            '<input type="text" name="fr_options[txt_'.$i.']"' .
                'value="' . $options['txt_'.$i] .'" size="200" />' .
            '<a class="repeatable-field-remove button" href="#">REMOVE</a>' .
            '</li>';
        $i++;
    }
} else {
    $output .= '<li>' .
        '<input type="text" name="fr_options[txt_1]" value="" size="200" />' .
        '<a class="repeatable-field-remove button" href="#">REMOVE</a>' .
        '</li>';
}
$output .= '</ul></div>' .
    '<a class="repeatable-field-add button" href="#">ADD</a>';
echo $output;

If your $options array contains more than just the fields you will have to tackle the above loop differently. The rest still applies.

The jQuery

jQuery('.repeatable-field-add').click(function() {
    var theField = jQuery(this).closest('div.repeatable-wrap')
        .find('.repeatable-fields-list li:last').clone(true);
    var theLocation = jQuery(this).closest('div.repeatable-wrap')
        .find('.repeatable-fields-list li:last');
    /* the 2 linebreaks before the .find methods
        are for presentation reasons here only */
    jQuery('input', theField).val('').attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    });
    theField.insertAfter(theLocation, jQuery(this).closest('div.repeatable-wrap'));
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if( fieldsCount > 1 ) {
        jQuery('.repeatable-field-remove').css('display','inline');
    }
    return false;
});

jQuery('.repeatable-field-remove').click(function(){
    jQuery(this).parent().remove();
    var fieldsCount = jQuery('.repeatable-field-remove').length;
    if( fieldsCount == 1 ) {
        jQuery('.repeatable-field-remove').css('display','none');
    }
    return false;
});