jQuery function does not work for all fields of the same class

Question

I have the following jQuery code to disable a submit button in a form when the values are empty. the code works fine for all entries except for .action_manager (which is a textarea generated dynamically in a table)in which by filling only the first row, the button is enabled. I want all the fields to be filled before the submitbuttonis reactivated. Only one instance of action_manager is enough to get the button enabled ( which is not what I want)

 $('document').ready(function(){

        var submitButton = $('input[name="store_values"]');
        checkValues();

        $('select.actuallevel').on('change',function(){
            checkValues();
        });
        $('select.targetlevel').on('change',function(){
                checkValues();
            });
        $('select.quarter_manager').on('change',function(){
            checkValues();
        });
        $('select.year_manager').on('change',function(){
            checkValues();
        });

        $(".action_manager").each(function()
        {
           $(this).on('change',function(){
                checkValues();
          });
        });


        function checkValues(){
            submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 ||
                $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 ||
                $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 ||
                $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 ||
                !$.trim($(".action_manager").val())


            );
            //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0);
        }
    });

The textarea field is the following:

echo "<td><textarea class='action_manager' id='action-".$inf['Competence_ID']."' name='acto-".$inf['Competence_ID']."'>";if (isset($inf['actiontext'])){echo $inf['actiontext'];}echo "</textarea></td>";
    echo"<td>";

http://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values — tbraun89, Apr 19 '13 at 11:40
@tbraun89, I do not want to change the whole code for a small bug. — auicsc, Apr 19 '13 at 11:49

Mysteryos · Accepted Answer · 2013-04-19T12:32:24.770

Given that you have inserted the .action_manager textareas dynamically, they were not present when your document has been loaded. Therefore, your attached events to .action_manager textareas will not be active for new textareas.

Here's the proper way to attach the events to the new and old .action_manager textareas:

   $(document).on('change','.action_manager',function(){
        checkValues();
  });

EDITED ANSWER:

Use the following function instead

        function checkValues(){
            var action_managerfilled = true;
            $(".action_manager").each(function(){
               if (!$.trim($(this).val())){
                    action_managerfilled = false;
                    return false;
               } 
            });
            submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 ||
                $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 ||
                $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 ||
                $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 ||
                !action_managerfilled
            );
            //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0);
        }

It seems that $('.action_manager').val() returns the value of the first textarea only, on all cases instead of checking the values of each textarea of the class '.action_manager'; hence the .each() function above to fix the issue.

This did not help. All the other fields are also generated dynamically, and still it works for them. They are all `select`fields. The only difference is that this one is a `textarea` — auicsc, Apr 19 '13 at 11:46
by dynamically, i meant they are added on load based on values from the DB — auicsc, Apr 19 '13 at 11:50
Please post a snippet of your html code; Might help us zero-down on your real problem. — Mysteryos, Apr 19 '13 at 11:58
https://www.friendpaste.com/6nxj1LsHGGt8NLD0yOwzBu I dont know how easy it could be for you to detect things.. — auicsc, Apr 19 '13 at 12:05
Your checkValues() function returns true even if i remove the .action_manager condition from the function. Therefore the problem doesn't lie there. Still testing it out.. — Mysteryos, Apr 19 '13 at 12:14

bipen · Answer 2 · 2013-04-19T11:42:19.650

0

you need to use on delegated event for dynamically generated elements..and you don't need to use $.each loop here , the selector selects all the element starting with that class...

$(document).on('change','.action_manager',function(){
     checkValues();
});

however, it is recommneded to use the closest static parent that is present in the document than the document itself

edited Apr 19 '13 at 11:42

answered Apr 19 '13 at 11:40

bipen

36,319
9
49
62

Thank you for the reply, but this did not solve the problem. I think I might have some problem in the function itself? – auicsc Apr 19 '13 at 11:47

jQuery function does not work for all fields of the same class

2 Answers2