Search code examples
javascripttextboxcalendaronclick

How to attach onclick event for a JavaScript generated textbox?


I have a table row which contains a textbox and it has an onclick which displays a JavaScript calendar... I am adding rows to the table with textbox, but I don't know how to attach onclick event to the JavaScript generated textbox...

<input  class="date_size_enquiry" type="text" autocomplete="off"
onclick="displayDatePicker('attendanceDateadd1');" size="21" readonly="readonly"    
maxlength="11" size="11"  name="attendanceDateadd1" id="attendanceDateadd1" 
value="" onblur="per_date()" onchange="fnloadHoliday(this.value);">

And my JavaScript generates a textbox,

    var cell2 = row.insertCell(1);
    cell2.setAttribute('align','center')
    var el = document.createElement('input');
    el.className = "date_size_enquiry";
    el.type = 'text';
    el.name = 'attendanceDateadd' + iteration;
    el.id = 'attendanceDateadd' + iteration;
    el.onClick = //How to call the function displayDatePicker('attendanceDateadd1');
    e1.onblur=??
    e1.onchange=??
    cell2.appendChild(el);

Solution

  • Like this:

    var el = document.createElement('input');
    ...
    el.onclick = function() {
        displayDatePicker('attendanceDateadd1');
    };
    

    BTW: Be careful with case sensitivity in the DOM. It's "onclick", not "onClick".