web-dev-qa-db-fra.com

Implémenter un champ de saisie à valeurs multiples où le nombre d'entrées n'est pas limité

Je développe une application (plug-in) où l'utilisateur doit entrer un nombre quelconque de phrases dans la page des paramètres et celles-ci seront utilisées par le plug-in.

J'ai implémenté ceci pour capturer les valeurs d'entrée comme suit:

register_setting('my_group', 'my_options', 'my_validate');

La page des paramètres pointe vers le formulaire de saisie en tant que:

function my_options_page() {
  echo '<div class="wrap">';
    echo '<h2>'.esc_html( get_admin_page_title() ).'</h2>';
    echo '<h3>Setup / Settings</h3>';
    settings_errors();
    echo '<form action="options.php" method="post">';
      settings_fields("my_group");
      echo '<table class="form-table">';
        echo '<tr valign="top"><th colspan="2">Data Input</th></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [1]</th><td><input name="my_options['phrases'][0]" value="" size="32" type="text"></td></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [2]</th><td><input name="my_options['phrases'][1]" value="" size="32" type="text"></td></tr>';
        echo '<tr valign="top"><th scope="row">Phrase [3]</th><td><input name="my_options['phrases'][2]" value="" size="32" type="text"></td></tr>';
      echo '</table>';
    echo '</form>';
  echo '</div>';
}

Cela permet à l'utilisateur d'entrer 3 phrases. La validation des données déclarée dans register_settings est:

function my_validate($input){
  foreach ($input['phrases'] as $i => $phrase) {
    $output['phrase'][$i] = esc_html($phrase);
  }
  return $output;
}

Je suis conscient que je peux ajouter autant de champs de saisie que nécessaire dans le formulaire pour étendre celle-ci à partir des 3 entrées. Toutefois, je souhaite que l'utilisateur puisse ajouter autant de phrases que nécessaire, qui seront ensuite traitées lorsque le formulaire est en cours. soumis et seront stockés dans le tableau $ output ['phrase'] [].

Existe-t-il un moyen d'implémenter un champ à entrées multiples prenant autant de phrases que l'utilisateur souhaite saisir?

Toutes les idées ou suggestions sur la façon de l'aborder seront les bienvenues.

phpformssettings
2
WPDavid

Existe-t-il un moyen d'implémenter un champ à entrées multiples prenant autant de phrases que l'utilisateur souhaite saisir?

Oui, il existe - vous pouvez ajouter un champ input dans lequel l'utilisateur entrera un nombre, qui correspond au nombre de phrases supplémentaires qu'il/elle souhaite ajouter.

Mais je choisirais une solution JavaScript/jQuery, dans laquelle nous utilisons un script de champ répétable comme this . Essayez simplement la demo et laissez-moi savoir si vous avez besoin d’aide pour utiliser le script/code.

Et voici comment j'ai implémenté cette solution/ce script avec votre champ phrases:

Tout d'abord, enregistrez et mettez en file d'attente le fichier script _. Par exemple:

add_action( 'admin_menu', 'my_add_admin_menu' );
function my_add_admin_menu() {
    // I used `add_options_page()`, but you can use similar function. The point
    // is, we'd need the `$hook_suffix` variable.
    $hook_suffix = add_options_page( 'WPSE 309235', 'WPSE 309235', 'manage_options', 'wpse-309235', 'my_options_page' );

    // Registers and enqueues our repeatable field script. You shouldn't "hotlink"
    // to CodePen. Instead, save the file to my-repeatable-field.js and upload it
    // to your site, and then link to that file.
    add_action( 'load-' . $hook_suffix, function(){
        wp_register_script( 'my-repeatable-field', 'https://codepen.io/anon/pen/vaJaGZ.js', [ 'jquery' ], '20180727' );
        wp_enqueue_script( 'my-repeatable-field' );
    } );
}

Deuxièmement, ajoutez/utilisez les noms HTML et class nécessaires.

Ceci est une version modifiée de votre fonction my_options_page(). Les principales modifications se trouvent dans la variable table, y compris la balise d'ouverture <table>.

function my_options_page() {
  echo '<div class="wrap">';
    echo '<h2>'.esc_html( get_admin_page_title() ).'</h2>';
    echo '<h3>Setup / Settings</h3>';
    //settings_errors(); // In my case, this isn't necessary.
    echo '<form action="options.php" method="post">';
      settings_fields("my_group");
      echo '<table class="form-table repeatable-field">';
        $phrases_arr = my_options( 'phrases' );
        $count = count( $phrases_arr );

        echo '<tr valign="top"><th colspan="2">Data Input</th></tr>';
        // Displays 3 initial rows.
        $rows = max( $count, 3 );
        for ( $i = 0, $j = 1; $i < $rows; $i++, $j++ ) {
            $phrase_str = isset( $phrases_arr[ $i ] ) ? $phrases_arr[ $i ] : '';
            echo '<tr valign="top" class="repeatable-field-row">' .
                '<th scope="row">Phrase [<span class="repeatable-field-number">' . $j . '</span>]</th>' .
                '<td><input name="my_options[phrases][]" value="' . esc_attr( $phrase_str ) . '" size="32" type="text" class="repeatable-field-input">' .
                    '<span class="repeatable-field-buttons"></span></td>' .
            '</tr>';
        }

        $phrases_url = my_options( 'phrases_url' );
        echo '<tr valign="top">' .
            '<th>Phrases URL (*Non-repeatable* Field)</th>' .
            '<td><input type="text" name="my_options[phrases_url]" value="' . esc_attr( $phrases_url ) . '" class="regular-text" placeholder="URL"></td>' .
        '</tr>';
      echo '</table>';
      submit_button();
    echo '</form>';
  echo '</div>';
}

C'est tout pour la partie script. cependant,

Dans le code de fonction my_options_page() modifié, il existe des appels passés à my_options(), que j'ai créés pour extraire les options de la base de données. Voici le code:

function my_options( $key = null ) {
    $options = wp_parse_args( get_option( 'my_options' ), [
        'phrases'     => [],
        'phrases_url' => '',
    ] );

    // Returns a single option.
    if ( $key ) {
        return isset( $options[ $key ] ) ? $options[ $key ] : null;
    }

    // Returns all the options.
    return $options;
}

J'ai également modifié le code de fonction my_validate():

function my_validate($input){
  $phrases_arr = [];

  foreach ($input['phrases'] as $phrase) {
    if ( $phrase = esc_html( $phrase ) ) {
      $phrases_arr[] = $phrase;
    }
  }

  $input['phrases'] = $phrases_arr;

  return $input;
}

Le code complet

..est disponible ici .

2
Sally CJ