javascript - Dynamic form using input type number and onchange event -
i have form on picture, , want "numero de cuartos" field append same amount of inputs of "numero de personas adultas" , "numero de niños", additionally, "numero de niños" input needs append same amount of "edad de niños" inputs.
i have this:
<!--input type number of numero de cuartos--> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label>numero de cuartos</label> <input required type="number" id="cuartos" name="cuartos" onchange="insertarcampos();" class="form-control" min="0"/> </div> </div> <!--place append--> <div id="contenidopersonas"> </div> <!-- form appended depending on number of "numero de cuartos" input --> <div id="rooms" style="display:none;"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="form-group"> <label>numero de personas adultas</label> <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6"/> </div> </div> <div class="col-md-4 col-sm-4"> <div class="form-group"> <label>numero de niños</label> <input required type="number" id="nino" name="nino[]" class="form-control" min="0" max="6" onchange="insertaredadesninos();"/> </div> </div> <div class="col-md-4 col-sm-4"> <!-- inside edadninos div goes div id "ninos"--> <div id="edadninos"> </div> </div> </div> </div> <!-- form appended on "edadninos" div depending on number of "numero de niños" input --> <div id="ninos" style="display:none;"> <div class="form-group"> <label>edad de niños</label> <input required type="number" id="edadnino" name="edadnino[]" class="form-control" min="0" max="12"/> </div> </div>the javascript:
function insertarcampos(){ var personassingle = $('#cuartos').val(); for(i = 0;i < personassingle;i++){ $('#contenidopersonas').append($('#rooms').html()); $('#contenidopersonas').append("<hr>"); } } function insertaredadesninos(){ var numninos = $('#nino').val(); $('#edadninos').empty(); for(i = 0;i < numninos;i++){ $('#edadninos').append($('#ninos').html()); } } this appends things correctly, in picture, there problems:
if change mind , instead of "2", put 1, inputs erased , appended again because of empty function , don't know how correct that.
the other thing "numero de niños" input works on first one, second "numero de niños" input doesn't because has same id first one, don't know how correct either.
i need send inputs separated php script, separation marked visually on form of picture tag
<hr> thanks!
what trying emulate how templates work, not idea use html of dom elements in document (maybe can use replace change html nasty solution), recommend take @ how jquery templates work http://jsfiddle.net/zarjay/zakm7/ in meanwhile code trying achieve:
(you need add reference jquery templates plug in) http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js)
<!--input type number of numero de cuartos--> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label> numero de cuartos </label> <input required type="number" id="cuartos" name="cuartos" onchange="insertarcampos();" class="form-control" min="0" /> </div> </div> <br /> <!--place append--> <div id="contenidopersonas"> </div> <!-- form appended depending on number of "numero de cuartos" input --> <script id="roomstemplate" type="x/jquery-tmpl"> <div class="room" room-number="${roomnumber}"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="form-group"> <label> numero de personas adultas </label> <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6" /> </div> </div> <div class="col-md-4 col-sm-4"> <div class="form-group"> <label> numero de ni�os </label> <input required type="number" name="nino[]" class="nino form-control" min="0" max="6" onchange="insertaredadesninos(${roomnumber});" /> </div> </div> <div class="col-md-4 col-sm-4"> <!-- inside edadninos div goes div id "ninos"--> <div class="edadninos"> </div> </div> </div> </div> <hr room-number="${roomnumber}" /> </script> <!-- form appended on "edadninos" div depending on number of "numero de ni�os" input --> <script id="ninostemplate" type="x/jquery-tmpl"> <div class="ninos" nino-number="${ninonumber}"> <div class="form-group"> <label> edad de ni�os </label> <input required type="number" class="edadnino" name="edadnino[]" class="form-control" min="0" max="12" /> </div> </div> </script> the javascript:
function insertarcampos() { var personassingle = $('#cuartos').val(); var currentrooms = $('#contenidopersonas .room').length; if(personassingle > currentrooms) { (var = currentrooms; < personassingle; i++) { $('#roomstemplate').tmpl({ roomnumber: }).appendto('#contenidopersonas'); } } else { (var = currentrooms; > personassingle; i--) { $('[room-number="'+(i - 1)+'"]').remove(); } } } function insertaredadesninos(roomnumber) { var numninos = $('.room[room-number="'+roomnumber+'"] .nino').val(); var currentninos = $('.room[room-number="'+roomnumber+'"] .edadnino').length; if(numninos > currentninos) { (i = currentninos; < numninos; i++) { $('#ninostemplate').tmpl({ ninonumber: }).appendto('.room[room-number="'+roomnumber+'"] .edadninos'); } } else { (var = currentninos; > numninos; i--) { $('[room-number="'+ roomnumber +'"] [nino-number="'+(i - 1)+'"]').remove(); } } } also aproach bit outdated, can mvc framework http://knockoutjs.com not complicated.
Comments
Post a Comment