Question

Hide calendar pop-up; make field read only in table based on condition

Forms

Updated June 20, 2019

asked on June 19, 2019

With help from Jason Smith, I have some great code that will alert employees when they attempt to request leave dates that are not in the same pay period (the Pay Period Date is populated via a lookup). I added code to make the Pay Period Date field read only (wouldn't work using the Forms read only option) and hide the calendar icon:

$(document).ready(function(){
  // Not equal validator
  window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      // return whether or not the value is the same as the first row
      return value == $('.PPEdate input:eq(0)').val();
    },
    messages: {
      en: 'Leave dates must be in the same pay period. Submit additional forms as needed.',
    }
  });
  
  // assign validator when new rows are added
  $('.PPEtable .cf-table-add-row').click(function(){
    registerValidator();
  });
  
  // register validator on existing rows
  registerValidator();
});

function registerValidator(){
  // assign validator
  $('.PPEdate input').attr('data-parsley-notequalto','');
}

$(document).ready(function () {
  
  $('.PPEdate input').attr('readonly',true);
  
  $('.cf-table-add-row').click(function () {
    $('.PPEdate input').attr('readonly',true);
    $('.PPEdate img').hide();
    $('.PPEdate .ui-datepicker-trigger').hide();
  });
});

Two things that I would like to fix/change:

When a date is selected in the Date of Leave field, the calendar picker pops up in the Pay Period Date field (even though it is read only). I have tried to disable it in both JS and CSS but neither works. Any other ideas?

Is there a way to make the Hours field read only (i.e., making it uneditable) if the alert message is present in the Pay Period Date field in the same row? My thought is that if that could happen, then the form could not be submitted, since it is a required field, until the row is corrected. I know that I could try to hide the Submit button, but it is already being manipulated in another way and I don't want to mess with that.

Thank you.

1 0

Answer

SELECTED ANSWER

replied on June 20, 2019

I used an array to compare fields and do some logic. I also used Jason's custom parsley validator (super cool to know!). Lastly, I could turn back on the read only attribute on the Pay Period date. Hope this helps someone someday.


$(document).ready(function () {

  // Not equal validator
  window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      // return whether or not the value is the same as the first row
      return value == $('.PPEdate input:eq(0)').val();
    },
    messages: {
      en: 'Leave dates must be in the same pay period. Submit separate forms as needed.',
    }
  });  
  
	var getTableData = function(){

    var totalRows = $('#q144 tr').length-1;//-1
    var allDates = []  
	var firstPPDt = $('#q144 tr:nth-child(1) td:nth-child(3) div div input').val();
  
    for (var r=1; r<totalRows+1; r++){
		 var rowPPDt = $('#q144 tr:nth-child('+r+') td:nth-child(3) div div input').val();
		 var rowPPDtInput = $('#q144 tr:nth-child('+r+') td:nth-child(3) div div input');
		 var rowHoursInput = $('#q144 tr:nth-child('+r+') td:nth-child(4) div input');
      		
        //if the row's PPDt is not an empty value, add it to the array(allDates)
    	if(rowPPDt!= undefined && rowPPDt != ''){//rowDtOfLeave!=''||
		 	allDates.push(rowPPDt);
        }
      
        //if the PPDt does not equal the firstPPDt then show error message else hide error message
        if(rowPPDt!=firstPPDt) //$.inArray(firstPPDt, allDates) > -1
        {
          	rowPPDtInput.attr('data-parsley-notequalto','');
  			rowPPDtInput.parsley().validate();
          	rowHoursInput.attr('readonly', true);
      	}
      	else
        {
	        rowPPDtInput.removeAttr('data-parsley-notequalto','');
  			rowPPDtInput.parsley().validate();
          	rowHoursInput.attr('readonly', false);
        }  
  	};//for  
  
  
  };//getTableData

  //on change of PPEdate OR on click of delete row OR on click or add new row
  $('#q144').on('change', '.PPEdate', getTableData);
  $('.PPEtable table').on('click', '.form-del-field, .cf-table-add-row:contains("Add another date")', getTableData); 

});//end doc ready

Good luck!

0 0

Replies

replied on June 20, 2019

This is pretty darned awesome - thanks, Chris!

1 0

You are not allowed to follow up in this post.

Question

Question

Hide calendar pop-up; make field read only in table based on condition

Answer

Replies

Sign in to reply to this post.