CODEWITHSUNDEEP
javascriptjqueryfunctionvariables
Trekdrop
Trekdrop

Reputation: 495

Javascript function works only on one variable

I'm working on a plugin, however it works for one half now. The problem is that I get a few variables from a checkbox, but the function will only work on the last checked item (in the list) of the checkbox, not for the others.

My code:

jQuery(document).ready(function(){

  jQuery('#gap-filtedit input[type=button]').click(function(){
    jQuery('.filter-checkbox:checked').each(function() {
      getchecked = jQuery(this).data('rel');

      val = '[gap ';
      console.log(getchecked);

      jQuery('.' + getchecked).each(function(){
        val = val + getchecked + '=';
        name = jQuery(this).find('label').data('id');
        title = jQuery(this).find('input[type=text],select').val();

        if (!title) title = '';
        if (name != 'null') {

          val = val + name + ':' + title + ', ';

        }
      });
    });


    window.send_to_editor( val );
  });
});

The log will give me the selected options. However the function after the console.log will only work on the last selected in the row.

How to get the function to work for every selected item?

Upvotes: 0

Views: 236

Answers (2)

MikeM
MikeM

Reputation: 27405

while looping the checkboxes you have 

val = '[gap '; // setting the value

while looping the form fields you are appending 

...
val = val + getchecked + '='; // appending
...
val = val + name + ':' + title + ', '; // appending
...

now when the inner loop finishes and goes back to the outer loop, your val is set back to [gap (basically erasing the last inner loops appends)

A solution is to declare the variable within the click function and append (rather than set) in the first loop

example jsfiddle

jQuery(document).ready(function () {
    jQuery('#gap-filtedit input[type=button]').click(function () {
        var val = ""; // give variable proper scope vs creating a global

        jQuery('.filter-checkbox:checked').each(function () {
            getchecked = jQuery(this).data('rel');

            val += '[gap '; // append instead of set
            console.log(getchecked);

            jQuery('.' + getchecked).each(function () {
                val += getchecked + '=';
                var name = jQuery(this).find('label').data('id');
                var title = jQuery(this).find('input[type=text],select').val();

                if (!title) title = '';
                if (name != undefined) {
                    val += name + ':' + title + ', ';
                }
            });
        });

        window.send_to_editor(val);
    });
});

sidenotes:

  • scope the other variables (var title, var name)
  • var name = jQuery(this).find('label').data('id'); will either have a value or be undefined (rather than "null")

Upvotes: 1

Thijs Limmen
Thijs Limmen

Reputation: 714

Do the function within the .each statement:

jQuery(document).ready(function(){

        jQuery('#gap-filtedit input[type=button]').click(function(){
            jQuery('.filter-checkbox:checked').each(function() {
                    getchecked = jQuery(this).data('rel');

            val = '[gap ';
            console.log(getchecked);

jQuery('.' + getchecked).each(function(){   
        val = val + getchecked + '=';                      
        name = jQuery(this).find('label').data('id');
        title = jQuery(this).find('input[type=text],select').val();     

                    if (!title) title = '';
                        if (name != 'null') {

                val = val + name + ':' + title + ', ';
                window.send_to_editor( val );

                            }
                        });
                    });



                });
            });

Upvotes: 2

Related Questions