Using jQuery to Populate a Text Field Based on Checkboxes ID?

Question

Context

I'm trying to build an answer to this WordPress question.

I'm generating dynamic checkboxes in the media upload thickbox window. And they should serve to populate a text field where the user can copy/paste its value.

The final output of the text field is the include attribute in this shortcode [gallery include="23,39,45"].

Mainly, I need a helping hand to build this last part: Checkbox -> Populate/Unpopulate Text Field...

Layout

Dynamic checkboxes
Point of insertion of the text field (after the last <tr> shown in the console)
Text field to be populated, should be include=" + CheckBoxID1 ^comma CheckBoxID2 ^comma etc + "

Actual Code

<?php
add_action( 'admin_head-media-upload-popup', 'wpse_53803_script_enqueuer' );

function wpse_53803_script_enqueuer() {
    if( $_GET['tab'] == 'gallery' ) 
    {
        ?>
            <style>#media-upload th.order-head {width: 5%} #media-upload th.actions-head {width: 10%}</style>
            <script type="text/javascript">
            jQuery(document).ready( function($) {
    
                /* Iterate through the media items */
                $('.filename.new').each(function(i,e){
                    var id = $(this).next('.slidetoggle').find('thead').attr('id').replace(/media-head-/, '');
                    var filename = $('<label>Add to gallery list <input type="checkbox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>').insertBefore($(this));
                    filename.css('float','right').css('margin-right','40px');

                    filename.id = id; // PROBLEM: not sure how to do this in Javascript
                    
                    // BUG: the alert is being fired twice
                    filename.click(function() {
                        alert('Handler for img id = '+filename.id+' called.');
                    });
                });                 
            });
            </script><?php
    }
}

Missing Parts

Create a dynamic text field to be populated.
Solve the problem and the bug noticed in the comments.
Make the filename.click(function() build the desired string inside the text field.

@JasonMcCreary - Yep, I have a verbose(?), verbatim(?), problem... (question for english.stackexchange?).. and seen/answered many problematic, difficult to understand, questions... Thanks for the heads up :) — brasofilo
– brasofilo, Commented Jun 6, 2012 at 3:19

Prasenjit Kumar Nag · Accepted Answer · 2012-06-06 03:50:31Z

1

You can do this using something similar to this

 $(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
    var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked')
                       .map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));
    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

});

You can replace document with any closer static container which you have to find by inspecting the add media markup. And You have find a element where you want to add the input field, add it like

$('<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>')
 .appendTo(TARGETIDORCLASS);

Working DEMO

And based on this your rewritten code would be something like

jQuery(document).ready( function($) {
     //add input field
     $('<span>[gallery</span><input type="text" id="shortcode" /><span>]</span>')
 .appendTo(TARGETIDORCLASS);
    //bind checkbox change handler


     $(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
         var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked').map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));

    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

    });


    /* Iterate through the media items */
    $('.filename.new').each(function(i,e){
        var id = $(this).next('.slidetoggle')
                        .find('thead')
                        .attr('id')
                        .replace(/media-head-/, '');
       var filename = $('<label>Add to gallery list <input type="checkbox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>')
              .insertBefore($(this));
       filename.css('float','right').css('margin-right','40px');

                });                 
            });

This should work. I am in a hurry, couldn't test much, check and let me know if you find any error, I would love to fix those.

edited Jun 6, 2012 at 3:50

answered Jun 6, 2012 at 3:37

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

brasofilo Over a year ago

Hey, this working demo seems pretty goood.. will have to really test tomorrow, thanks for the input!

Prasenjit Kumar Nag Over a year ago

May I have the reasons for down vote please? I invested half an hour on this pausing my work, and down vote after that isn't great. Please at least care to comment the reason so I can correct myself.

brasofilo Over a year ago

Joy, I upvoted you from -1 and I see it is -1 again... This Stack is much more wild then WordPress', wow.. Downvotes without comments? No comments! (PS.: amazed at having received 3 upvotes in minutes..!)

Prasenjit Kumar Nag Over a year ago

@brasofilo, I dont mind down voting anyone can down vote, if they take a moment and tell me the reason So that I dont do it again in future. I am a newbie and try to do rnd and answer question with a hope of learning new things from the rnd. Down votes without comment is discouraging.

brasofilo Over a year ago

Olé! Works like a charm, Joy! Very well done, much appreciated!! I'll research your profile and ++ where due :)

|

Collectives™ on Stack Overflow

Using jQuery to Populate a Text Field Based on Checkboxes ID?

Context

Layout

Actual Code

Missing Parts

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Context

Layout

Actual Code

Missing Parts

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related