You are viewing limited content. For full access, please sign in.

Question

Question

"Input Blocked" message keeps hidden field from accepting data

asked on May 6 Show version history

This is a first for me. 

I have a table field that has dates in a drop down. On a change to that field two other columns get populated with the reformatted dates. Those columns are hidden with jQuery not Field Rules.

 

How the columns are hidden:

//on load hide the .RecDtReformat column
  $('.uploadNewDocsTbl td:nth-child(5), .uploadNewDocsTbl td:nth-child(6)').css('display', 'none');
  $('.uploadNewDocsTbl th:nth-child(5), .uploadNewDocsTbl th:nth-child(6)').css('display', 'none');
  
//on click add new row, hide new .RecDtReformat column
  $('.uploadNewDocsTbl .cf-table-add-row').on('click', function(){
    $('.uploadNewDocsTbl .RecDtReformat, .uploadNewDocsTbl .recDayMo').each(function(){
    	$(this).css('display', 'none');	
    });	
  });

When it was just one column getting populated it was fine, but when I added the second both columns started showing an unfriendly message in the html:

here it is so it pings on a text search:

<td data-col="q68" data-title="RecDt Reformat" class="RecDtReformat" style="display: none;"><label class="cf-col-label" id="FieldLabel68(1)" for="Field68(1)">RecDt Reformat<span class="screen-reader-legend">field type single line</span></label><div class="cf-field"><input type="text" id="Field68(1)" name="Field68(1)" aria-labelledby="FieldLabel68(1)" class="singleline cf-xlarge" maxlength="4000" data-list-focus="true" data-parsley-legal-character="True" vo="e"><p class="screen-reader-legend">Input blocked. Maximum character limit of 4000 characters reached.</p></div></td>

this is a little easier to read:

 

The 'Input blocked' message appears on page load, not after my jQuery runs to populate the other 2 columns.

Here is that:

//reformat date into next column
  $('.uploadNewDocsTbl').on('change', '.upDocsTblRecDt', function() {
    var toDt = new Date($(this).find('option:selected').text());

	var formatYr = toDt.getFullYear();
    var mo = toDt.getMonth()+1;
    var formatMo = new function(){
      	if (mo < 10){
      	(mo = '0' + mo)}
  		};//function
	var day = toDt.getDate();
    var formatDay = new function(){
      	if (day < 10){
      	(day = '0' + day)}
  		};//function
	var newFormat = formatYr + '-' + mo + '-' + day;

    //format for dd-MM
    const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
	let dayMo = day + "-" + months[toDt.getMonth()]; 

    $('.uploadNewDocsTbl p.screen-reader-legend').each(function(){
    	$(this).remove();    
    });
    
	//write reformatted date to RecDt Reformat column    
    $(this).closest('tr').find('td:eq(5) input').val(newFormat).change();
    //write reformatted date to Rec Dt-Mo column
	$(this).closest('tr').find('td:eq(6) input').val(dayMo).change();

  }); 

I really couldn't find much on the internet, so I am bringing it up here. 

My workaround was to remove the <p> element containing the message on change of the above 'Receipt Date' drop-down field. With that, the reformatted dates appear as variable when the form is submitted. This is more of a workaround than a solution on an error message I don't understand.

Anyone ever see something like this before?

Thank you in advance

 

0 0

Replies

replied on May 6

I don't know if that message is anything to worry about. I created a test form with no JavaScript and no Lookups and a single line field still had that message.

It's not the same as a parsley error that would prevent submission; based on the class, it looks like it's just for screen readers and it is not visible by default.

1 0
replied on May 6

Although that is true, if I leave it there my data does not save as a variable. When it is gone, data saves and life is good. Maybe one day someone will add some more details to this thread. Life goes on....

0 0
replied on May 6

That's really odd. It seems like there may be another factor involved. I have those same elements on my forms and I haven't had an issue with values not saving.

I'll keep an eye on it and post an update here if I ever run into the same issue or find anything worth noting.

1 0
replied on May 6

Thanks Jason!  

0 0
replied on May 7

After further testing I discovered that since I had an 'upload' field in a preceding column it was throwing off my jQuery for populating the desired fields. I moved the upload field after the fields being populated and it is working fine. I could even use Field Rules to hide the columns rather than jQuery. 

0 0
replied on May 7 Show version history

Glad you found the issue! Using indexing to target fields can be touchy, especially when you have lookups since it seems to add hidden input fields for those as well.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.