javascript - Dynamically added fields not working with calendar field -
i trying attach calendar field dynamically added html code. initially, code shows 3 input fields (as shown in "p_scents" div). when "add employer" clicked, should generate 3 inputs( ones above). working fine me generate first 2 fields (without calendar field), when add calendar field, not working.
<body> <h2><a href="#" id="addscnt">add employer</a></h2> <div id="p_scents"> <p> <label>employer name</label><input class="dynamic" type="text" name="employern" id="employern" /> <label>job title</label><input class="dynamic" type="text" name="jtitle" id="jtitle" /> <label>start date </label> <input type="text" name="startd" class="textfield" /> <script language="javascript"> new tcal ({ // form name 'formname': 'form', // input name 'controlname': 'startd' }); </script> </p> </div> <script type="text/javascript"> $(function() { var scntdiv = $('#p_scents'); var = $('#p_scents p').size() + 1; $('#addscnt').live('click', function() { if( <= 10 ) { $('<p><label>employer name</label><input class="dynamic" type="text" name="employern' + +'" id="employern" /><label>job title</label><input class="dynamic" type="text" name="jtitle' + +'" id="jtitle" /><label>start date </label> <input type="text" name="startd' + +'" class="textfield" /> <script language="javascript"> new tcal ({'formname': 'form','controlname': 'startd' + +''});</script><a href="#" id="remscnt">remove</a></p>').appendto(scntdiv); i++; return false;} else{ alert('maximum reached!'); } }); $('#remscnt').live('click', function() { if( > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); </script> </body>
sorry, there lot of stuff wrong/not in code. i'm trying give suggestions how improve this, first, what's wrong:
- ids have unique. in code, give multiple elements same id. remove link not work.
- strings cannot span multiple lines in javascript.
- don't add such bunch of html string. have quotation error in string.
- don't add
<script>tags way (at least here not necessary).
my suggestions:
remove script tag html, don't need , remove ids of input elements
<h2><a href="#" id="addscnt">add employer</a></h2> <div id="p_scents"> <p> <label>employer name</label><input class="dynamic" type="text" name="employern" /> <label>job title</label><input class="dynamic" type="text" name="jtitle" /> <label>start date </label> <input type="text" name="startd" class="textfield" /> </p> </div> you don't need use live [docs] click event handler on #addscnt. use click [docs]:
$('#addscnt').click(... you need live elements add dynamically.
now important thing: how add new fields.
you can easily, cloning existing p element. thing have remember change name of input fields (add i) , call tcal function:
$('#addscnt').click(function() { if (i <= 10) { $('#p_scents p:first').clone() // clone .find('input').attr('name', function(index, value) { // change name return value + i; }).end() .append('<a href="#" class="remscnt">remove</a>') // add remove link .appendto(scntdiv); // init calender new tcal({ formname: 'form', controlname: 'startd'+i }); i++; return false; } else { alert('maximum reached!'); } }); reference: clone [docs], attr [docs]
note remove link has class, not id. link better use delegate [docs]:
$('#p_scents').delegate('.remscnt', 'click', function() { if (i > 2) { $(this).closest('p').remove(); i--; } return false; }); also note use closest [docs] here, gives closest p element. if use parents, remove ancestor p elements , might result in removing lot more intended.
last not least, have make call
new tcal ({ // form name 'formname': 'form', // input name 'controlname': 'startd' }); because removed script tag.
here working demo of that: http://jsfiddle.net/fkling/ygsn9/ (with empty tcal function).
Comments
Post a Comment