how to create a function to run on multiple rows on a table

SELECTED ANSWER

replied on September 13, 2016

The Short Answer:

You need to use the on() function to create a delegated event handler and attach it to the table instead of the individual dropdown fields.

$(document).ready(function(){
  $('.cf-table tbody').on('change','.dropdown', function(){
    switch($(this).find(':selected').val()){
      case 'Special':
      case 'Temporary Disability':
        $('#q30').hide();
        break;
      default:
        $('#q30').show();
        break;
    }
  });
});

The Long Answer:

This setup is referred to as a delegated event handler. The $(document).ready() function runs when the page is initially loaded (so your table probably has 1 row in it). On line 5 of your code, you are selecting all elements on the page with the "dropdown" class assigned to them and storing it to a variable (only contains the 1 instance of the dropdown class in Row 1). On line 9, you are assigning a 'change' event handler function only to those objects you selected on line 5. Any new lines in your table do not trigger this event handler, because they did not exist when you made the assignment, and so there was never any event handler function assigned to them.

To handle these situations, JavaScript has the concepts of event bubbling and delegated event handlers. You'll want to look at the instructions for jquery's .on() function. What happens in this case, is you attach the event handler function to some parent object of the thing you want to respond to. This parent object should exist when the page loads (the table's tbody element for instance). Whenever an event occurs on an object on the page, the browser actually "bubbles up" the event to all it's parent objects as well, meaning that it triggers the same event all the way up the chain of the HTML to give each parent object the opportunity to respond as well. When you use this form of the on() function that includes a selector, you are adding an event handler to the parent object (in this case the table body) that will only respond when the child object that generated the event matches this selector. In effect, this means your event handler will respond to any changes made to any '.dropdown' fields that are children of the table to which you attached the event handler.

2 0

View 2 previous replies

replied on September 13, 2016

thank you! it works the way i wanted it to.

0 0

replied on September 14, 2016

can you help me disable the submit button if another type of leave(example annual leave) is chosen with special leave? i do not want to allow the user to submit the form if special or disability leave is taken in conjunction with the other types of leave.

this is how it looks right now:

0 0

replied on September 14, 2016 • Show version history

Hmmm. The easiest thing may be to actually consider redesigning your form. Perhaps make 2 tables (one for regular leave types and one for special leave types). Then make a checkbox or something above the tables for whether they are submitting regular or special leave. Use a field rule to show the appropriate table.

You could use JavaScript as well. In that case, you'd need to check all values of the table every time any row changes. Something like this:

$(document).ready(function(){
  $('.cf-table tbody').on('change','.dropdown', function(){
    var values = $('.dropdown').map(function(){
      return $(this).val();
    }).get();
    if( (values.indexOf('Special')!=-1 || values.indexOf('Temporary Disability')!=-1) && values.findIndex(function(leaveType){return (leaveType!='Special'&&leaveType!='Temporary Disability');})){
      $('.Submit').attr('disabled',true);
    } else {
      $('.Submit').removeAttr('disabled');
    }
  });
});

0 0

replied on September 15, 2016 • Show version history

Thank you for all your help. I decided to just erase the users input in the table if they selected special leave in combination with another leave with the following code:

$(document).ready(function(){

  $('.cf-table tbody').on('change','.dropdown', function(){
    
    switch ($(this).find(':selected').val()){
      case 'Special':
      case 'Temporary Disability':
       $('#q30').hide();
       alert("You are only allowed one type of leave if you select Special or Temporary Disability leave");
       $("#q31 tr:gt(1)").remove();
        break;
      default:
        $('#q30').show();
        $('.Submit').show();
        break;
    }
  });
});

0 0

replied on December 17, 2021

I am looking for a sample form solution that uses dropdowns inside of a table. I have never done this before and need to understand how it works. thanks!

0 0

Question

Question

how to create a function to run on multiple rows on a table

Answer

Replies

Sign in to reply to this post.