i trying add variable name of dynamically generated div tag. here have div
var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #e6e6e6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>safety verification method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>"; and instead of having "safety verification method" each time, want "safety verification method 1.1.1" values incrementing. have values incrementing in stored variable called 'field'. s
<b>"'+field+'"safety verification method:</b></div> but kept returning me errors.
edit: rephrase question, since generate div tag in beginning , create index variable after, how can update way; similar
$(level3_div).appendto(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3); except display name rather id.
full source code
var spacer = "<div style=\"clear: both; height: 1px;\"></div>"; var level2_div = "<div class=\"level2_main text\" style=\"border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>level 2:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div><div style=\"float: left; padding-left: 10px; padding-top: 5px;\"><a href=\"#\" class=\"addlevel3\">add hazard control</a></div></div>"; var level3_div = "<div class=\"level3_main text\" style=\"overflow: hidden; clear: both; background-color: #f6f6f6; margin: 5px 0 5px 25px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>hazard controls:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div><div style=\"float: left; padding-left: 10px; padding-top: 5px;\"><a href=\"#\" class=\"addlevel4\">add safety verification method</a></div></div>"; var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #e6e6e6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>safety verification method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>"; var index_2 = 16; $("#container").on('click','.addlevel2', function() { $(level2_div).insertafter(".level2_main:last").find("input").attr("name","field_"+index_2).attr("id","field_"+index_2); index_2++; return false; }); var index_3 = 1; $("#container").on('click','.addlevel3', function() { var level3_parent = $(this).parents(".level2_main"); var level2_id = $(level3_parent).find("input").attr("id"); var div3_exists = $(level3_parent).find('.level3_main'); var div3_count = $(div3_exists).length; var level3_counter = "<input type=\"hidden\" name=\"hidden_\" id=\"hidden\" />"; if (div3_count == "0") { index_3 = 1; $(level3_counter).appendto(level3_parent).attr("name","hidden_"+level2_id).attr("id","hidden_"+level2_id).attr("value",index_3); $(spacer).appendto(level3_parent); $(level3_div).appendto(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3); } else { index_3 = div3_count + 1; $("#hidden_"+level2_id).attr("value",index_3); $(level3_div).appendto(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3); } index_3++; console.log(index_3); return false; }); edit #2:
what trying change each individual dynamically generated div tags name, not first version. example, first div tag read "hazard control 1" , next 1 generated read "hazard control 2" , on while original "hazard control 1" remained way , did not change.
html
<left><div class="tabs" align="left"> <ul class="tab-links"> <li class="active"><a href="#tab1">vtl</a></li> </ul> <div class="tab-content" align="left"> <div id="container" style="width: 90%; border: 1px solid #000;"> <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;"> <div style="float: left; width: 60px; padding-top: 5px;"><b>hazard cause #1:</b></div> <div style="float: left;"> <input type="text" name="field_1" id="field_1" size="35" /> </div> <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">add hazard control</a></div> </div> <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;"> <div style="float: left; width: 60px; padding-top: 5px;"><b>hazard cause #2:</b></div> <div style="float: left;"> <input type="text" name="field_2" id="field_2" size="35" /> </div> <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">add hazard control</a></div> </div> <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;"> <div style="float: left; width: 60px; padding-top: 5px;"><b>hazard cause #3:</b></div> <div style="float: left;"> <input type="text" name="field_3" id="field_3" size="35" /> </div> <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">add hazard control</a></div> </div> <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;"> <div style="float: left; width: 60px; padding-top: 5px;"><b>hazard cause #4:</b></div> <div style="float: left;"> <input type="text" name="field_4" id="field_4" size="35" /> </div> <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">add hazard control</a></div> </div> <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;"> <div style="float: left; width: 60px; padding-top: 5px;"><b>hazard cause #5:</b></div> <div style="float: left;"> <input type="text" name="field_5" id="field_5" size="35" /> </div> <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">add hazard control</a></div> </div> <div><input type="hidden" name="leveltwototal" id="leveltwototal" value="6" size="35" /></div> </div> any appreciated! thanks!
the easiest way needs replace part.
var field = '1.1.1'; var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #e6e6e6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>safety verification method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>"; console.log(level4_div.replace('safety verification method:', 'safety verification method: ' + field));
Comments
Post a Comment