Quiero generar una cantidad de bloques usando JQuery. Intento este código:
$(function() { var input = $('<select name="contracts" id="contracts">\ <option value="default">-- Choose --</option>\ <option value="service">service</option>\ <option value="supply">supply</option>\ <option value="work">work</option>\ </select>\ <div>\ <label>start date</label>\ <input type="date" name="sdate" id="sdate">\ </div>\ <div>\ <label>end date</label>\ <input type="date" name="edate" id="edate">\ </div>'); var newFields = $(''); $('#nbr').bind('blur keyup change', function() { var n = this.value; if (n+1) { if (n > newFields.length) { addFields(n); } else { removeFields(n); } } }); function addFields(n) { for (i = newFields.length; i < n; i++) { var newInput = input.clone(); newFields = newFields.add(newInput); newInput.appendTo('#myForm'); } } function removeFields(n) { var removeField = newFields.slice(n).remove(); newFields = newFields.not(removeField); } });Pero no funciona correctamente. Este es mi código HTML:
<label>Number Of Contracts</label> <input type="number" name="nbr" id="nbr"> <form method="post"> <div id="myForm"></div> <input type="submit" name="submit" value="Submit"> </form>Primero, muestra la cantidad de divs que quiero, pero cuando hago clic en cualquier lugar, aparece la imagen de abajo , esta es la imagen .
pruebe el siguiente, agregué un contenedor div y en la variable de entrada y agregué un parseInt porque n se evalúa como una cadena.
$(function() { var input = $('<div><select name="contracts" id="contracts">\ <option value="default">-- Choose --</option>\ <option value="service">service</option>\ <option value="supply">supply</option>\ <option value="work">work</option>\ </select>\ <div>\ <label>start date</label>\ <input type="date" name="sdate" id="sdate">\ </div>\ <div>\ <label>end date</label>\ <input type="date" name="edate" id="edate">\ </div></div>'); var newFields = $(''); $('#nbr').bind('blur keyup change', function() { var n = parseInt(this.value); if(isNaN(n)) { n = 0; } if (n > newFields.length) { addFields(n); } else { removeFields(n); } }); function addFields(n) { for (i = newFields.length; i < n; i++) { var newInput = input.clone(); newFields = newFields.add(newInput); newInput.appendTo('#myForm'); } } function removeFields(n) { var removeField = newFields.slice(n).remove(); newFields = newFields.not(removeField); } });