Home/ Questions/Q 9116963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:47:52+00:00

This is my code $(function() { $( .datepicker ).datepicker(); }); This Code is genrating

  • 0

This is my code

 $(function() {
    $( ".datepicker" ).datepicker();
    });

This Code is genrating extra text feilds:

<script type="text/javascript">
   var counter = 0;
function add_user1(FieldName) {
counter++;
var newFields = document.getElementById(FieldName).cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(FieldName);
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>

But this part of html working perfect, but when I click on add more fields the datepicker doesn’t work.

                **<label id="l" style="width:120px;">Employment History:</label>
                <br class="clear"/>
                <label id="l" style="width:80px;">Role:</label>
                <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_role[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">Company:</label>
                <input id="l" type="text" size="37" onblur="" value="" style="width:auto;" name="user_com[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">From:</label>
                <input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]"/>
                <br class="clear"/>
                <label id="l" style="width:80px;">To:</label>
                <input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/>
                <br class="clear"/>**

It is viewing jquery calender but when i put it in this particular div the date picker doesn’t work

                **<div id="add_user1" style="display: none;" >**
<label id="l" style="width:80px;">Role:</label><input id="l" type="text" size="37" style="width:auto;" name="user_role[]" value="" /><br class="clear"/>
<label id="l" style="width:80px;">Company:</label><input id="l" type="text" size="37" style="width:auto;" name="user_com[]" value="" /><br class="clear"/>
<label id="l" style="width:80px;">From:</label><input class="datepicker" type="text" size="37" onblur="" value="" style="width:auto;" name="user_from[]" /><br class="clear"/>
<label id="l" style="width:80px;">To:</label><input class="datepicker"  type="text" size="37" onblur="" value="" style="width:auto;" name="user_to[]"/><br class="clear"/></div>
<input type="button" id="add_user1()" onclick="add_user1('add_user1')" name="btn" value="Add More!" /><br>
                <br class="clear"/>
               <!---------Dyanmic Fields ---------->
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should just need to call .datepicker(); on the new fields after they’re created.

    var counter = 0;
function add_user(FieldName) {
  counter++;
  var newFields = document.getElementById(FieldName).cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  var newField = newFields.childNodes;
  for (var i=0;i<newField.length;i++) {
    var theName = newField[i].name
    if (theName)
      newField[i].name = theName + counter;
  }
  var insertHere = document.getElementById(FieldName);
  insertHere.parentNode.insertBefore(newFields,insertHere);

  $(newFields).find('.datepicker').datepicker();
}

    There is also a typo on your button’s click event: Change the function from add_user1('add_user1') to add_user('add_user1')

    Working fiddle demo: http://jsfiddle.net/Rykus0/xTqvC/

    • 0