applying mask to new row in collection/section on form

asked on January 16, 2018 • Show version history

I am using a collection and applying a mask to the number entered into the field. When a row is added the mask is not applied to the new row. Any ideas about how I could do this.

I have included the portion of code that I am using to accomplish this:

//Format Budget Codes
$(document).ready(function () {
  $(document).on('click','bdc',function() {
    $.getScript('https://laserfiche.mcoe.org/Forms/js/jquery.mask.min.js', function () {
    $('.bdc input').mask('99-9999-9-9999.99-9999-9999-999-999-999');
     });
    alert("you clicked the element with an ID of bdc...");
  });
//  $.getScript('https://laserfiche.mcoe.org/Forms/js/jquery.mask.min.js', function () {
//	$(".bdc input").mask("99-9999-9-9999.99-9999-9999-999-999-999");
//	});
});

1 0

SELECTED ANSWER

replied on January 16, 2018

Hi Ramika,

In your script it would register the on click event when document is loaded, so it would only add events to the fields shown when document is loaded; when adding a new row on table, the newly added row does not have the events registered.

So you need to register the event again when new row is added like this:

$('.cf-table-add-row').click(function(){/*register the event*/});

2 0

View 2 previous replies

replied on January 17, 2018

okay, thank you for the pointer. I have made changes as you can see below. Only it still only masks the first row of the table.

//Format Budget Codes
$(document).ready(function () {
    $.getScript('https://laserfiche.mcoe.org/Forms/js/jquery.mask.min.js', function () {
	$(".bdc input").mask("99-9999-9-9999.99-9999-9999-999-999-999");
    $('.cf-table-add-row').click(function(){
      $(".bdc input").mask("99-9999-9-9999.99-9999-9999-999-999-999");
    	});
	});
});

0 0

replied on January 17, 2018 • Show version history

'.cf-table-add-row' may be incorrect. I am actually adding two number fields to the collection. Its not really a table.

0 0

replied on January 17, 2018 • Show version history

//Format Budget Codes
$(document).ready(function () {
    $.getScript('https://laserfiche.mcoe.org/Forms/js/jquery.mask.min.js', function () {
	$(".bdc input").mask("99-9999-9-9999.99-9999-9999-999-999-999");
    $('.cf-collection-append').on('click',function(){
      $(".bdc input").mask("99-9999-9-9999.99-9999-9999-999-999-999");
    	});
	});
});

Thank you for your assist! I found the element name upon 'inspection', made a minor change. it works now.

Thanks again! :-)

3 0

replied on January 17, 2018

Oops somehow I thought it was a table so I used the add button in table, sorry for the confusion.

Your update was correct

0 0

replied on April 20, 2018

I recently had to update this bit of code with .on('blur', function()... I am updating this incase someone runs into this issue.

0 0

Question

Question

applying mask to new row in collection/section on form

Answer

Replies

Sign in to reply to this post.