Geek asks and answers

Using jQuery to populate textbox based on checkbox id?

Context

I am trying to build the answer to this WordPress question .

I create dynamic checkboxes in a thick media download window. And they should serve to fill in the text field where the user can copy / paste its value.

The end result of the text field is the include attribute in this short codec [gallery include="23,39,45"].

Basically, I need help creating this last part: Checkbox -> Fill / Nonpopulate text field ...

Layout

  • Dynamic flags
  • The text box entry point (after the last <tr>one shown on the console)

  • The text field to be filled must be include = " + CheckBoxID1 comma CheckBoxID2 comma , etc. + "

    enter image description here

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 box to populate.
  • Solve the problem and the error seen in the comments.
  • Make the filename.click(function()construction of the desired line inside the text field.
+5
source share
1 answer

You can do it using something like 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 it documentwith any closer static containerthat you need to find by looking at the markup for adding media. And you find the item you want to add an input field to, add it as

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

Working demo

-

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');

                });                 
            });

. , , , - , .

+1

More articles:


All Articles