By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,601 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

Dynamically added fields not working with calendar field

P: 1
I am trying to attach a calendar field to a dynamically added html code. Initially, the code shows 3 input fields (as shown in the "p_scents" div). When the "Add Another Employer" is clicked, it should generate another 3 inputs( as the ones above). It is working fine for me to generate the first 2 fields (without the calendar field), but when I add the calendar field, it is not working.

Expand|Select|Wrap|Line Numbers
  1. <h2><a href="#" id="addScnt">Add Another Employer</a></h2>
  2.      <div id="p_scents"> <p>
  3.      <label>Employer Name</label><input class="dynamic" type="text" name="employern" id="employern" />
  4.      <label>Job Title</label><input class="dynamic" type="text" name="jtitle" id="jtitle" />
  5.      <label>Start Date </label> <input type="text" name="startd" class="textfield" />
  6.          <script language="JavaScript">
  7.          new tcal ({
  8.          // form name
  9.          'formname': 'form',
  10.          // input name
  11.          'controlname': 'startd' });
  12.  </script>
  13.  </p>
  14.  </div>
  15.   <script type="text/javascript">
  16.  $(function() {
  17.      var scntDiv = $('#p_scents');
  18.      var i = $('#p_scents p').size() + 1;
  19.       $('#addScnt').live('click', function() {
  20.          if( i <= 10 ) {
  21.              $('<p><label>Employer Name</label><input class="dynamic" type="text"     name="employern' + i +'" id="employern" /><label>Job Title</label><input class="dynamic" type="text" name="jtitle' + i +'" id="jtitle" /><label>Start Date </label> <input type="text" name="startd' + i +'" class="textfield" />
  22.          <script language="JavaScript">
  23.          new tcal ({'formname': 'form','controlname': 'startd' + i +''});</script><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
  24.              i++;
  25.              return false;
  26. }
  27.          else{
  28.              alert('Maximum Reached!');
  29.          }
  30.      });
  31.       $('#remScnt').live('click', function() {
  32.               if( i > 2 ) {
  33.           $(this).parents('p').remove();
  34.                      i--;
  35.              }
  36.              return false;
  37.      });
  38.  });
  39.  </script> 
  40.  
Jul 1 '11 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Take the JavaScript code out and add it separately as you did for the initial calendar field.
Jul 4 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.