Custom Fields
Re-Envisioned
Support Meta Box Group Display value of text field (URL) in custom_html field in same group

  • Creator
    Topic
  • #3041
    nerm
    Participant

    I have a ‘useful links’ cloned group: Site field and URL field, I’d like to add a custom_html field with a link using the url field value to the group to view and check the value of url field from the meta box.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #3042
    Anh Tran
    Keymaster

    Hmm, I think it’s not possible because the group is cloned and there is no way to attach multiple values of the clones into the meta box array. You can try JavaScript to update the HTML of the custom_html field when the site/url field is updated.

    #3043
    nerm
    Participant

    Thanks for quick reply, any further help in regards to the javascript would be greatly appreciated.

    #3046
    Anh Tran
    Keymaster

    No problem, here is what I tried:

    <?php
    add_filter( 'rwmb_meta_boxes', function ( $meta_boxes )
    {
    $meta_boxes[] = array(
    'title' => 'Update custom html field demo',
    'fields' => [
    [
    'name' => 'Group',
    'type' => 'group',
    'id' => 'group',
    'clone' => true,
    'fields' => [
    [
    'name' => 'Site title',
    'id' => 'title',
    'type' => 'text',
    'class' => 'live-update',
    ],
    [
    'name' => 'URL',
    'id' => 'url',
    'type' => 'url',
    'class' => 'live-update',
    ],
    [
    'name' => 'Preview',
    'type' => 'custom_html',
    ],
    ],
    ],
    ],
    );
    return $meta_boxes;
    } );
    add_action( 'rwmb_enqueue_scripts', function ()
    {
    wp_enqueue_script( 'live-update', plugins_url( 'script.js', __FILE__ ), [ 'jquery' ] );
    } );

    view raw
    register.php
    hosted with ❤ by GitHub

    jQuery( function ( $ )
    {
    $( '#wpbody' ).on( 'change', '.live-update input', function ()
    {
    var $group = $( this ).closest( '.rwmb-group-clone' ),
    title = $group.find( '.rwmb-text-wrapper input' ).val(),
    url = $group.find( '.rwmb-url-wrapper input' ).val(),
    $preview = $group.find( '.rwmb-custom_html-wrapper .rwmb-input' );
    $preview.html( '<a href="' + url + '">' + title + '</a>' );
    } );
    $( '.live-update input' ).trigger( 'change' );
    } );

    view raw
    script.js
    hosted with ❤ by GitHub

    You can change the jQuery selector in the JS file if needed.

    #3062
    Anh Tran
    Keymaster

    I will close this topic as it’s confirmed to work via email 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Display value of text field (URL) in custom_html field in same group’ is closed to new replies.