Populate Select2 with Cfdb-submissions

  • Resolved bhasic

    (@bhasic)


    2 years, 9 months ago

    Great plugin, but I’m stuck with using select2.

    I’m using Cfdb-plugin and I’m trying to make select2 get values id, text and text2 from cfdb-database but only show id as option in select2. I need to populate hidden fields rstext and rstext2 with data-values text and text2 so that when the form is submitted, id, text and text2 will get saved to another table in their own columns (Cfdb will handle saving all fields at submit).

    My table looks like this:

    
|   id   |   text    |   text2    | rownumber |
-----------------------------------------------
|   rs1  |  rs1text  |  rs1text2  |     1     |
|   rs2  |  rs2text  |  rs2text2  |     2     |
|   rs3  |  rs3text  |  rs3text2  |     3     |

    In my functions.php I have:

    
// cfdb shortcode
add_action('wpcf7_init', 'add_cf7_shortcode_select_rs');
function add_cf7_shortcode_select_rs() {
    wpcf7_add_form_tag('select_rs', 'select_rs', true);
}

// cfdb-select
function select_rs($tag) {
    $tag = new WPCF7_FormTag( $tag );    
    $form = 'RS-form';
    $options = array();
    $options['orderby'] = 'rownumber DESC';
    require_once(ABSPATH . 'wp-content/plugins/contact-form-7-to-database-extension/CFDBFormIterator.php');
    $exp = new CFDBFormIterator();
    $exp->export($form, $options);
    ob_start();
    echo '<select name="select_rs[]" multiple="multiple" id="select_rs" class="rsselect js-example-basic-multiple wpcf7-form-control wpcf7-select">';
    echo '<option value=""></option>';

    while ($row = $exp->nextRow()) {
        printf('<option data-id="%s" data-text="%s" data-text2="%s">%s</option>', $row['id'], $row['text'], $row['text2'], $row['id']);
    }
    echo '</select>';
    $custom_tag=ob_get_contents();
    ob_end_clean();
    return sprintf('<span class="wpcf7-form-control-wrap %s">%s</span>', sanitize_html_class( $tag->name ), $custom_tag);
}

    Create a Form Drop-Down with values from CFDB submissions

    Also I would like to get select2-multiple selected and saved data with line breaks like this:

    
|   id   |   text    |   text2    |
-----------------------------------
|   rs1  |  rs1text  |  rs1text2  |
|        |  moretext |            |
|   rs2  |  rs2text  |  rs2text2  |
|        |           |  moretext  |
-----------------------------------
|   rs3  |  rs3text  |  rs3text2  |
|   rs4  |  rs4text  |  rs4text2  |
-----------------------------------
|   rs2  |  rs2text  |  rs2text2  |

    How to do this with select2 in your plugin?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    I have no experience using CFDB plugin, so I can’t help you here. If you can get your fields populated into a select dropdown field, you can then use the Smart Grid’s select2 CSS classes to get it to convert to a select2 field. You can also disable the initialisation of the select2 field on form load and use your own select2 custom instance.

    CFDB uses custom tables to store data so I don’t recommend it. I would recommend my other plugin, Post My CF7 Form, which stores submissions into WP core post/custom post types, metafields and taxonomies, so it makes much easier to manipulate the data right within the WP framework. Furthermore, the Smart Grid has been designed to integrate with WP core data structures (post & taxonomies) so by using Post My CF7 Form you ensure you data is stored the right way for the Smart Grid to handle that data in subsequent forms.

    Thread Starter bhasic

    (@bhasic)

    Populating works now, but how do I enable multiple select and where do I add code to config Select2 to get the data to go where I need?

    Thread Starter bhasic

    (@bhasic)

    There’s also a problem with inserting more than one select2 in form. When I add [select_1 class:select2] and [select_2 class:select2] only the first one works.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    only the first one works.

    how do you see this? What isn’t working in the 2nd one? (are you getting any js errors in your console?)

    Populating works now, but how do I enable multiple select

    this is a CF7 plugin question as you are using the dropdown field…

    [select select_1 multiple class:select2]

    where do I add code to config Select2 to get the data to go where I need?

    don’t understand your question

    Thread Starter bhasic

    (@bhasic)

    No errors in console. First select field is Select2, others normal selects when all have same class:select2.

    [select select_1 multiple class:select2] doesn’t work because I’m using shortcodes to populate select and Select2-fields from database.

    I need data rows from printf('<option data-id="%s" data-text="%s" data-text2="%s">%s</option>', $row['id'], $row['text'], $row['text2'], $row['id']);
    to go in hidden fields so that they’re saved to database in their own columns when submitting. Where and how do I write the jQuery-code for that and for setting other Select2-configuration options like in https://select2.org/configuration/options-api?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    No errors in console. First select field is Select2, others normal selects when all have same class:select2.

    is your form online? Can I take a look?

    Where and how do I write the jQuery-code for that and for setting other Select2-configuration options like in

    in a custom js script file. You can use the plugin’s feature for that.

    Thread Starter bhasic

    (@bhasic)

    I solved it by installing Chosen jQuery.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    I solved it by installing Chosen jQuery.

    can you give me more details so others can also resolve similar issues.

    What version of WP are you using, what version of jQuery did you have to isntall?

    Thread Starter bhasic

    (@bhasic)

    I couldn’t get Select2 to work The way I needed when it was installed as WordPress-plugin. I installed it as jQuery also, but didn’t work.

    Then installed Chosen jQuery-plugin similar to Select2: https://harvesthq.github.io/chosen/

    Here is an example of code I used to get the data-values to populate input-fields:

    
  jQuery("#chosen_select").on("change", function () {
    var selected = {};
    jQuery("#chosen_select :selected").each(function () {
      selected[jQuery(this).val()] = jQuery(this).data();
    });
    const selectedText1Values = [];
    const selectedText2Values = [];
    for (key in selected) {
      const data = selected[key];
      selectedText1Values.push(data.text1);
      selectedText2Values.push(data.text2);
    }
    
    jQuery("#textinput1").val(selectedText1Values.join(", ")).prop("readonly", true);
    jQuery("#textinput2").val(selectedText2Values.join(", ")).prop("readonly", true);
    console.log(selected);
  });

    WP version was 5.9, now 6.0. jQuery version is 3.6 and I use WordPress jQuery UI widgets-plugin to write jQuery-code.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    thanks for sharing! I will look into this chosen plugin. How does it compare with select2?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Populate Select2 with Cfdb-submissions’ is closed to new replies.