button - Progressive IDs - clone and insert div onclick with jQuery -
in webform cloning , inserting div onclick using jquery, working ok. having issues trying assign progressive id's cloned elements within div.
how assign new or progressive ids each cloned element within "#issuediv1"?
also how can removebutton remove previous cloned div?
jquery
$(document).ready(function() { $('#addbutton').click(function(){ $('#issuediv1').clone().insertafter('#issuediv1'); }); }); div
<div id="issuediv"> <div id="issuediv1"> <fieldset id="yourissue"> <legend>request details</legend> <p>please choose issue(s) below. (please note if have multiple balances out need submit each 1 separately)</p> <p> <label>your request:</label> <select type="text" class="required" name="request_details[]" id="requestdetails1" onchange="setspecificdetails(this);"> <option value="">select...</option> <option value="trust balance out">trust balance out</option> <option value="bank balance out">bank balance out</option> <option value="tixc out">tixc out</option> <option value="ins out">ins out</option> <option value="3rd party out">3rd party out</option> <option value="comm out">comm out</option> <option value="tax out">tax out</option> <option value="other">other</option> </select> </p> </fieldset> <div id="trustbalance" class="greybox"> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="datetrustbalanceout1" name="date_trust_balance_out"/> *</p> <br /> <br /> <p><label>did amount search bring further details reate issue?</label></p> <textarea id="trustamountsearch1" name="trust_amount_search" class="required" cols="90" rows="1" class="required"></textarea> * <br /> <br /> <p><label>did closed ledgers non-zero balances search in sherlock bring further information,</label></p> <p><label> if please provide details below or attach screenhot:</label></p> <textarea id="trustclosedledgerssearch1" name="trust_closedledgers_search" class="required" cols="90" rows="1" class="required"></textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="trustfurtherdetails1" name="trust_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="bankbalance" class="greybox"> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="datebankbalanceout1" name="date_bank_balance_out"/> *</p> <br /> <br /> <p><label>did amount search bring further details reate issue?</label></p> <textarea id="bankamountsearch1" name="bank_amount_search" class="required" cols="90" rows="1" class="required"></textarea> * <br /> <br /> <p><label>did compare bank rec history against statement search in sherlock bring infomation?</label></p> <p><label>please provide details below or attach screenshot.</label></p> <textarea id="comparebanksearch1" name="compare_bank_search" class="required" cols="90" rows="1" class="required"></textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="bankfurtherdetails1" name="bank_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="tixcout" class="greybox"> <p><label>(please make sure have carried out amount search provide further details on issue)</label></p> <br /> <br /> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="datetixcout1" name="date_tixc_out"/> *</p> <br /> <br /> <p><label>did statements , payments search in sherlock bring further details relate issue?</label></p> <p><label> please provide details below or attach screenshot:</label> <p> <textarea id="tixcsearch1" name="tixc_search" class="required" cols="90" rows="1" class="required"> </textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="tixcfurtherdetails1" name="tixc_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="insout" class="greybox"> <p><label>(please make sure have carried out amount search provide further details on issue)</label></p> <br /> <br /> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="dateinsout1" name="date_ins_out"/> *</p> <br /> <br /> <p><label>did statements , payments search in sherlock bring further details relate issue?</label></p> <p><label> please provide details below or attach screenshot:</label> <p> <textarea id="insoutsearch1" name="insout_search" class="required" cols="90" rows="1" class="required"> </textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="insoutfurtherdetails1" name="insout_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="3rdparty" class="greybox"> <p><label>(please make sure have carried out amount search provide further details on issue)</label></p> <br /> <br /> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="date3rdpartyout1" name="date_3rdparty_out"/> *</p> <br /> <br /> <p><label>did fin unbalances 3p types search in sherlock bring further details relate issue?</label></p> <p><label> please provide details below or attach screenshot:</label> <p> <textarea id="3rdpartysearch1" name="3rdparty_search" class="required" cols="90" rows="1" class="required"> </textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="3rdpartyfurtherdetails1" name="3rdparty_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="commout" class="greybox"> <p><label>(please make sure have carried out amount search provide further details on issue)</label></p> <br /> <br /> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="datecommout1" name="date_comm_out"/> *</p> <br /> <br /> <p><label>did statements , payments search in sherlock bring further details relate issue?</label></p> <p><label> please provide details below or attach screenshot:</label> <p> <textarea id="commoutsearch1" name="commout_search" class="required" cols="90" rows="1" class="required"> </textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="commoutfurtherdetails1" name="commout_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="taxout" class="greybox"> <p><label>(please make sure have carried out amount search provide further details on issue)</label></p> <br /> <br /> <p><label>date balance went out according nbs auto-validation history search in sherlock?</label><input type="text" class="required date-picker tinyinput" id="datetaxout1" name="date_tax_out"/> *</p> <br /> <br /> <p><label>did statements , payments search in sherlock bring further details relate issue?</label></p> <p><label> please provide details below or attach screenshot:</label> <p> <textarea id="taxoutsearch1" name="taxout_search" class="required" cols="90" rows="1" class="required"> </textarea> * <br /> <br /> <p><label>please prodive further details might relevant issue:</label></p> <textarea id="taxoutfurtherdetails1" name="taxout_further_details" class="required" cols="90" rows="1" class="required"></textarea> * </div> <div id="otherdiv" class="greybox"> <p><label>please state problem below , provide detail possible (along relevant screenshots):</label></p> <textarea id="otherdetails1" name="other_details" class="required" cols="90" rows="5" class="required"></textarea> * </div> </div> </div> button
<p><input type='button' value='add issue' id='addbutton' class='clone' style='width: 200px; height: 40px' /></p> <p><input type='button' value='remove' id='removebutton' class='remove' style='width: 200px; height: 40px' /></p>
ok, lets clear real quick, try avoid using ids if can. maintaining these id's nightmare. have keep track of removed, added, modified , gets messy.
instead, use class, , make use of jquery's .find, .parent, .children, , this functions can find html elements relative each other.
for example looks want unique ids don't have duplicates. suggest doing following don't worry duplicate ids:
put issuedivs inside wrapper div , give div's class
<div id='issues'> <div class='issuediv'></div> <div class='issuediv'></div> </div> then following:
$(document).ready(function() { $('#addbutton').click(function(){ $('#issues').append($('.issuediv').first().clone()); //this gets first div class 'issuediv' //there's .last() function, //which last 1 in list }); });
Comments
Post a Comment