I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others. Here's my code:
<head>
<script type="text/javascript">
$(function () {
$(".hajanDatePicker").datepicker();
});
</script>
<script type="text/javascript">
var intTextBox=0;
function addElement(){
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','txtDatePicker');
newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>";
contentID.appendChild(newTBDiv);
}
</script>
</head>
<body>
<form id="form1" method="get">
<div id="content">
<input type="text" id="txtDatePicker" name="test1"/>
</div>
<p><a href="javascript:addElement();" >Add</a>
</form>
</body>
When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.
I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others. Here's my code:
<head>
<script type="text/javascript">
$(function () {
$(".hajanDatePicker").datepicker();
});
</script>
<script type="text/javascript">
var intTextBox=0;
function addElement(){
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','txtDatePicker');
newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>";
contentID.appendChild(newTBDiv);
}
</script>
</head>
<body>
<form id="form1" method="get">
<div id="content">
<input type="text" id="txtDatePicker" name="test1"/>
</div>
<p><a href="javascript:addElement();" >Add</a>
</form>
</body>
When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.
Share Improve this question edited Aug 22, 2013 at 14:57 Manish Kumar 15.5k5 gold badges20 silver badges27 bronze badges asked Apr 23, 2012 at 12:08 RajRaj 9932 gold badges10 silver badges12 bronze badges 1-
You shouldn't be adding elements with the same ID. You can switch it to a class name instead, and then use what you currently have (as long as you give it the class
hajanDatePicker), with the addition of Jakub's answer. – jprofitt Commented Apr 23, 2012 at 12:13
1 Answer
Reset to default 2Just call
$(".hajanDatePicker").datepicker();
at the bottom of addElement function.
And change
<input id='txtDatePicker' type='text' name='test1'>
to
<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>
Also, you have multiple inputs on your page with the same id: txtDatePicker.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744400456a4572359.html
评论列表（0条）