Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

109
Vistas
Generate a number of blocks according to an HTML input value using JQuery

I want to generate a number of blocks using JQuery. I try this code :

$(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);
            }
        });

But It doesn't work correctly. This is my HTML code :

<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>

First It shows the number of divs I want but when I click anywhere it gives me the image below this is the image

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

try the one below, I have added a wrapper div and in the input variable and added a parseInt because n is evaluated as string.

        $(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);
        }
    });
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda