Make table columns required with Java Scripting depending on Radio Button

asked on July 6, 2021

Hi,

We have a form with a Radio button "Yes or No" value, we want to trigger the Java Script to make the table columns required. This is what we have done so far, but it only makes the first row of the table read-only. (We are not too concerned about the red asterisk.)

Any advice on what we are missing to do this for all rows and not just the first row?

  //This is to make fields required on table based on 'royes' as radio button with yes or no
  $('.royes').on('change',DetailsReq);
  DetailsReq();
  function DetailsReq(){
    var cPRE = $('.royes input:checked').val();
   

    if(cPRE === 'Yes'){
      $('.pre input').each(function(){
        $(this).attr('required', 'True');        
      })
      $('.pre select').each(function(){
        $(this).attr('required', 'True');
      })
    }
    if(cPRE === 'No'){
      $('.pre input').each(function(){
        $(this).removeClass('required').removeAttr('required');        
      })
      $('.pre select').each(function(){
        $(this).removeClass('required').removeAttr('required');
      })
    }

  } 
  
});

Then here you can see the second row is not read-only, just the first row.

0 0

replied on July 6, 2021

When you have a table you're dealing with a slightly different scenario for JavaScript.

You need a way to target the appropriate row; the way your code is written now the change event would affect every row of the table. You need to use delegated events.
If users can add more rows, the new rows won't have the event handlers because they did not exist when the handlers were assigned.

I have a post that goes in-depth on why this occurs and how to get the behavior you want using event delegation and various row-targeting techniques.

Table and Collection JavaScript Event Handlers - Laserfiche Answers

On another note, a couple things you might want to change about your code:

JQuery has a :input selector so you wouldn't need separate input and select loops
You should use .prop for required instead of .attr as of JQuery 1.6

$('.pre :input').each(function(){
    $(this).prop('required',true);
});

$('.pre :input').each(function(){
    $(this).removeClass('required').prop('required',false);
});

2 0

View 1 previous reply

replied on July 6, 2021 • Show version history

Thanks Jason, I see what is happening now. It basically makes the columns in the table first row fields required, but I need to add in option to check when the Add button is clicked. If I have a fixed amount of Rows, then it makes them all required which is correct, but if not and I have the add button to add new rows, then the new added rows is not required. So I added in a trigger event to kick off the function every time the add new row button is clicked and it works.

Trigger

$('.InvTbl .cf-table-add-row').on('click', DetailsReq);

Function

  //This is to make fields required on table based on 'royes' as radio button with yes or no
  $('.royes').on('change',DetailsReq);
  DetailsReq();
  function DetailsReq(){
    var cPRE = $('.royes input:checked').val();   

    if (cPRE === 'Yes'){
      $('.pre :input').each(function(){
    $(this).prop('required',true);
       });      
    }
    else {
      $('.pre :input').each(function(){
    $(this).removeClass('required').prop('required',false);
      });
    }

  }
  
});

0 0

replied on July 6, 2021

You're right. I misinterpreted your post, but I think I see what you're doing now. Basically, all you need is a function to add the read only status to new rows.

If you're adding rows manually, you can do that by attaching an event handler to the add row link. Something like,

$('.cf-table-add-row').on('click',myFunction);

If you add any rows with a lookup, then you would do something similar with the lookupcomplete event.

0 0

replied on July 6, 2021

I have added in the event handler on the form, but with the table class since I don't want it to trigger on other tables Add new rows and it is working great.

0 0

replied on July 6, 2021

I figured you'd need to customize it to fit your specific form, but glad you got it working.

1 0

Question

Question

Make table columns required with Java Scripting depending on Radio Button

Replies

Sign in to reply to this post.