jquery - Dynamically add equal select form fields with data taken from php -
i have form select fields dynamically generated , options taken php (same selects). need every <select>...</select> must shown in different line. can done having every <select>...</select> inside <div>...</div>.
this code have, it´s working select fields not within div:
<script type="text/javascript"> //<![cdata[ $(function(){ var counter = 1; $("#addbutton").click(function () { if(counter>10){ alert("only 10 textboxes allow"); return false; } var select = $('<select>').attr({id:'select'+counter,name:'select'+counter}); $.ajax({ url: 'selects.php', datatype: "html", success: function(data) { select.html(data); } }); select.appendto("#textboxesgroup"); counter++; }); $("#removebutton").click(function () { if(counter==1){ alert("no more textbox remove"); return false; } counter--; $("#select" + counter).remove(); }); $("#getbuttonvalue").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n textbox #" + + " : " + $('#textbox' + i).val(); } alert(msg); }); }); //]]> </script> <div id='textboxesgroup'> <div id="textboxdiv1"> <label>textbox #1 : </label><input type='text' id='textbox1' > </div> <div id="textboxdiv2"> <label>textbox #2 : </label><input type='text' id='textbox2' > </div> </div> <input type='button' value='add button' id='addbutton'> <input type='button' value='remove button' id='removebutton'> <input type='button' value='get textbox value' id='getbuttonvalue'> and html code generated select.php:
<option value="1">uno</option> <option value="2">dos</option> <option value="3">tres</option> <option value="4">cuatro</option>
use the wrap() function. :
put code before counter++;. :
$("#textboxesgroup > select").wrap ( function () { return '<div id="wrap_' + this.id + '"></div>'; } );
Comments
Post a Comment