PDA

View Full Version : Help for adding datepicker to a dynamically generated textbox in Javascript


rusho_shaw
02 Jun 2011, 06:03 AM
I am dynamically adding a row to a table when the user clicks on addRow link.
In the dynamically created row I have a textBox to which I have to add datepicker.
Please suggest how to dynamically add the datepicker to it.

A test html for the required functionality is given below:

<html>
<head>
<title>Majors Upload</title>
<link rel="stylesheet" href="calendar.css"/>
<script language="JavaScript" src="calendar_us.js"></script>

<script type = "text/javascript">
function addRowToTable(){

var tbl = document.getElementById('majTable');
var lastRow = tbl.rows.length;

var iteration = lastRow;
var row = tbl.insertRow(lastRow);

var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'applName' + iteration);
cellLeft.appendChild(el);


var cellRight = row.insertCell(1);
var el1 = document.createElement('input');
el1.setAttribute('type', 'text');
el1.setAttribute('name', 'startDate' + iteration);
el1.setAttribute('size', '10');
cellRight.appendChild(el1);
/*here i dynamically create text boxes with name startDate2, startDate3..and so on
** i want to add the datepicker to the added text boxes
**tried several ways, but not working
*/
}

function removeRowFromTable(){
var tbl = document.getElementById('majTable');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>
</head>

<body >
<form method="post" name="upload" action="">

<table border="1" id="majTable" >
<tr>
<th >Application Name</th>
<th >Start Date</th>
</tr>

<tr>
<td><input type="text" name="applName1"/></td>
<td><input type="text" name="startDate1" value="" readonly="true" size="10"/>
<script language="JavaScript">
new myCal ({'formname': 'upload','controlname': 'startDate1'});
</script>
</td>
</tr>

</table>
<a href="javascript:addRowToTable();" >Add Row</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:removeRowFromTable();" />Remove Last Row</a><br>
<input type="submit" value="Submit"/>&nbsp;&nbsp;&nbsp;&nbsp;
</form>

</body>
</html>


Thanks
Regards
Rusho Shaw