Jquery dynamic append validation -
i have drop down menu, which, on change appends textbox in html. want add jquery validation textbox , append validation on particular fieldset id. process should follow?
for context, see jsfiddle. if user selects "need more rooms or have children" , selects number of children > 0, age textbox appears. want add validation ensure age of children between 0 , 9.
html:
<div id="guestsrooms" class="clear"> <label class="label1" for="guestsroomsselect">guests:</label> <span> <span> <select id="guestsroomsselect" name="guestsrooms" style="width: 217; padding: 5px"> <option value="1-1">1 adult</option> <option selected="selected" value="2-1">2 adults in 1 room</option> <option value="3-1">3 adults in 1 room</option> <option value="4-1">4 adults in 1 room</option> <option value="2-2">2 adults in 2 rooms</option> <option value="0">need more rooms or have children?</option> </select> </span> </span> </div> <div id="roomconfig" class="roomconfig_fc"> <div id="addition"> </div> <div class="btnwrap" style="clear:both;border-bottom: 0.5px solid #ffffff;"> <a class="addroom" style="background-image:none; color:darkred;height:20px; margin-left:0px" href="javascript:void(0);"><img src="../images/searchbox/image1.png" class="addimage " /> add room</a> </div> <input type="submit" value="submit"> </div> jquery:
$(document).ready(function(){ var counter = 0; var forage = 0; $('#roomconfig').hide(); var index = 0; function childage(){ $('.hc_evt_children').bind("change",function () { var item=(this).id; // alert(item); $parentelement = $(this).parent().parent('div'); var id = $parentelement.attr("class"); // alert(id); var index1 = $("." + id + " input").size(); // alert(index1); var requested = $(this[this.selectedindex]).val() //alert(requested); if (requested > index1) { (i = index1; < requested; i++) { var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: '',style:'width:30px;' }); var my=$(this).closest("div"); my.append($ctrl); } } else if (requested < index1) { var x = requested - 1; $("." + id +" input:gt(" + x + ")").remove(); } if(requested==='0'){ $("." + id + " input").remove(); } }); } $('#guestsroomsselect').change(function () { if ($(this).val() === '0') { var $var2 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> <label class="lbl_sm" style="font-size: 0.75em" for="adults">adults</label>' $var2 = $var2 + '<br/><span> <span> <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #ffffff;"> <option value="1">1</option> <option value="2" selected="selected">2</option>' $var2 = $var2 + '<option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option>' $var2 = $var2 + '<option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </span> </span> </div>' $var2 = $var2 + '<div class="children_'+forage+'" > <label class="lbl_sm" style="font-size: .75em;" for="children">children</label><br/> <span> <select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #ffffff;">' $var2 = $var2 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>' $var2 = $var2 + '<option value="4">4</option> </select> </span> </div> </div>'; $("#addition").prepend('<fieldset id="' + counter + '" data-index="' + index + '">' + $var2 + '</fieldset>'); counter = counter + 1; index++; forage++; $('#roomconfig').show(300); } else if ($(this).val() === '1-1' || $(this).val() === '3-1' || $(this).val() === '4-1' || $(this).val() === '2-2' || $(this).val() === '2-1') { $('#roomconfig').hide(300); $('#addition fieldset :first').remove(); } childage(); }); $(".addroom").click(function () { // on add room event var $var1 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> ' $var1 = $var1 + '<span> <span> <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #ffffff;"> <option value="1">1</option> <option value="2" selected="selected">2</option>' $var1 = $var1 + '<option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option>' $var1 = $var1 + '<option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </span> </span> </div>' $var1 = $var1 + '<div class="children_'+forage+'" > <span> <select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #ffffff;">' $var1 = $var1 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>' $var1 = $var1 + '<option value="4">4</option> </select> </span> </div> <div id="chileage_'+forage+'" class="ch"></div> </div>' $var1 = $var1 + '<div class="btnrmv" id="' + counter + '" > <a class="removeroom " style=" width:30px; height:0px; margin:0px;left:200px;position:relative; top:-30px; background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);">remove<span></span> </a> </div>'; $("#addition").append('<fieldset id="' + counter + '" data-index="' + index + '"' + $var1 + '</fieldset>'); counter++; index++; forage++; // remove element $(".btnrmv").click(function () { $("#roomconfig fieldset#" + this.id).remove(); counter--; }); childage(); }); });
you add class such class: "age" when create text boxes, , click listener submit button check each 1 using each function.
i've added example here: http://jsfiddle.net/pyrj3/32/
Comments
Post a Comment