Baptiste Prophete Baptiste Prophete - 1 year ago 107
Javascript Question

Attach input mask in new row after click on button

I have table that has an input mask date format. When i click on ADD new row the new row is added but not the input mask date format. i would like to attach the input mask date field each time i click on new row.

<td class="centrer">Arrived Date</td>
<input type="text" name="datearrive" class="date" /> </td>
<button type="button" onClick="addRow(this)">ADD ROW</button>

window.addRow = function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var tr = document.createElement("tr");
var tdDate = document.createElement("td");
var tdButton = document.createElement("td");
var inputDate = document.createElement("input");
var inputButton = document.createElement("button");
inputButton.type = "button";
inputButton.innerHTML = "+";
inputButton.onclick = function() {

//input mask
jQuery(function($) {

Any help would be appreciated .

Answer Source

You must apply the .mask call to each newly added date element.

e.g. something like this:

$(inputDate).mask("99/99/9999");  << do this last


  • Apologies if I am not targeting the correct element, but you are not assigning the date class to anything in your code :)
  • As you are using jQuery already, you can reduce the row creation code by about 60% (maybe more) using jQuery. See below for an example.

jQuery version:

$(function() {
  $(document).on('click', '.add').click(function() {
    var $table = $(this).closest('table');
    var $row = $('<tr><td><input type="text" name="datearrive" class="date" /> </td><td><button type="button" class="add">ADD ROW</button></td></tr>')
    $(".date", $row).mask("99/99/9999");

The above example uses a delegated event, attached to document, so that it will fire on dynamically added buttons in new rows.

Working JSFiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download