Databases
StackOverflow2013
Postsdbo
POhow can i append textbox based on dynamic created dropdown children on changes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow can i append textbox based on dynamic created dropdown children on changes
    text
    copied!<p>i want to add child text boxes on the selection of child dropdown counting. I have try the separate code on jsfiddle which is working <a href="http://jsfiddle.net/hs7t8/" rel="nofollow">http://jsfiddle.net/hs7t8/</a> . There are two dropdown list are created on the selection of guest selection dropdown . it dynamically generates two drop down on add room button click. first one is adult and second is children. On the selection of children dropdown i want to text boxes accroding to the selection of the children dropdown. but it is not adding to page. please Help me out .complete running code on <a href="http://jsfiddle.net/pYRj3/1/" rel="nofollow">http://jsfiddle.net/pYRj3/1/</a></p> <pre><code>$('#guestsRoomsSelect').change(function () { if ($(this).val() === '0') { var $var2 = '&lt;div id="dropdown2_ ' + (counter) + ' " class="class1"&gt; &lt;div class="wrapadults" style="float:left"&gt; &lt;label class="lbl_sm" style="font-size: 0.75em" for="adults"&gt;Adults&lt;/label&gt;' $var2 = $var2 + '&lt;br/&gt;&lt;span&gt; &lt;span&gt; &lt;select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;' $var2 = $var2 + '&lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt;' $var2 = $var2 + '&lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;' $var2 = $var2 + '&lt;div class="children" &gt; &lt;label class="lbl_sm" style="font-size: .75em;" for="children"&gt;Children&lt;/label&gt;&lt;br/&gt; &lt;span&gt; &lt;select id="hc_f_children" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;"&gt;' $var2 = $var2 + '&lt;option value="0" selected="selected"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt;' $var2 = $var2 + '&lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt;'; $("#Addition").prepend('&lt;fieldset id="' + counter + '" data-index="' + index + '"&gt;' + $var2 + '&lt;/fieldset&gt;'); counter = counter + 1; index++; $('#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(); } }); var forage = 0; $(".addRoom").click(function () { // on add room event var $var1 = '&lt;div id="dropdown2_ ' + (counter) + ' " class="class1"&gt; &lt;div class="wrapadults" style="float:left"&gt; ' $var1 = $var1 + '&lt;span&gt; &lt;span&gt; &lt;select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;' $var1 = $var1 + '&lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt;' $var1 = $var1 + '&lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/span&gt; &lt;/span&gt; &lt;/div&gt;' $var1 = $var1 + '&lt;div class="children" &gt; &lt;span&gt; &lt;select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;" onselect="getIdvalue()"&gt;' $var1 = $var1 + '&lt;option value="0" selected="selected"&gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt;' $var1 = $var1 + '&lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;/span&gt; &lt;/div&gt; &lt;div id="chileage_'+forage+'" class="ch"&gt;&lt;/div&gt; &lt;/div&gt;' $var1 = $var1 + '&lt;div class="btnrmv" id="' + counter + '" &gt; &lt;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);"&gt;remove&lt;span&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt;'; $("#Addition").append('&lt;fieldset id="' + counter + '" data-index="' + index + '"' + $var1 + '&lt;/fieldset&gt;'); counter++; index++; forage++; // for remove element $(".btnrmv").click(function () { $("#roomconfig fieldset#" + this.id).remove(); counter--; }); var Idvalue = null; // Add childage textbox function getIdvalue() { Idvalue = $('.hc_evt_children').attr("id"); } $(Idvalue).change(function () { var index1 = $(".ch input").size(); var requested = parseInt($(".hc_evt_children").val(), 5); if (requested &gt; index1) { for (i = index1; i &lt; requested; i++) { var $ctrl = $('&lt;input/&gt;').attr({ type: 'text', name: 'text', value: '' }); $("#chileage_" + forage).append($ctrl); } } else if (requested &lt; index1) { var x = requested - 1; $("#chileage_ input:gt(" + x + ")").remove(); } }); }); </code></pre> <pre><code> &lt;div class="btnWrap" style="clear:both;border-bottom: 0.5px solid #FFFFFF;"&gt; </code></pre> <p> Add room </p> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload