En primer lugar, no soy programador de ningún tipo, así que necesito que solucione mi problema.
Tengo un formulario de contacto que tiene dentro un lugar donde puedo agregar más campos de entrada hasta un máximo de 10. Cada campo que agrego tiene dentro del código una clase que llamé "pers", y quiero que esta clase pers tenga un número incremental cercano a él, como pers1, 2, 3 y así sucesivamente.
Obtener el valor incremental fue fácil, pero el problema es que la clase "pers" no actualizará la variable manteniendo el primer número en la carga del documento.
Aquí está el código
<script type="text/javascript"> window.s = 1; </script> <script type="text/javascript"> $(document).ready(function() { var addButton = $('.add_button'); var wrapper = $('.field_wrapper'); var maxField = 10; var fieldHTML = '<div style="margin-top:5px;"><input type="text3" name="pers' + window.s + '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);"class="remove_button" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>'; $(addButton).click(function() { if (window.s < maxField) { window.s++; //Increment field counter $(wrapper).append(fieldHTML); //Add field html } }); $(wrapper).on('click', '.remove_button', function(e) { e.preventDefault(); $(this).parent('div').remove(); //Remove field html s--; //Decrement field counter }); }); </script>Hay una variable global "window.s" porque fue mi último intento de actualizar la var.
Los campos suman correctamente hasta 10 como debe ser, pero la "ventana.s" o cuando era solo "s" todavía mantiene su primer valor de 1, por lo que "pers" es siempre "pers1". Pensé que exponiendo una variable global habría solucionado el problema, pero nada.
¿Qué estoy haciendo mal?
Muchas gracias por su ayuda chicos.
El problema con su código es que solo configura fieldHTML una vez, cuando se carga la página. En este punto, window.s es 1 , por lo que este es el valor que se usa cada vez que hace referencia a fieldHTML . La solución rápida a esto sería colocar la definición de fieldHTML dentro del controlador de eventos click() .
Sin embargo, es mejor abordarlo para eliminar por completo la necesidad de la variable incremental. Utilice el mismo name en todos los campos que genere dinámicamente. De esta manera, no necesita mantener el conteo (por ejemplo, si se agregaron 5 y alguien elimina el tercero, actualmente terminará con 2 por per5 elementos). Debido a esto, también simplifica la lógica JS. Además, debe colocar el HTML para clonar en un elemento <template> , no el JS, para que no haya contaminación cruzada del código base.
Aquí hay un ejemplo práctico de los cambios que menciono:
jQuery($ => { var $addButton = $('.add_button'); var $wrapper = $('.field_wrapper'); var maxFields = 10; var fieldHTML = $('#field_template').html(); $addButton.click(() => { if ($('.field_wrapper > div').length < maxFields) { $wrapper.append(fieldHTML); } }); $wrapper.on('click', '.remove_button', e => { e.preventDefault(); $(e.target).closest('div').remove(); }); }); .field_wrapper>div { margin-top: 5px; } .field_wrapper input.time { margin-left: 3.5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button class="add_button">Add</button> <div class="field_wrapper"></div> <template id="field_template"> <div> <input type="text3" name="pers[]" placeholder="Nome e Cognome" /> <input type="time" name="time1[]" class="time" autocomplete="off" /> <input type="time" name="time2[]" class="time" autocomplete="off" /> <a href="#" class="remove_button" title="Rimuovi"> <img src="IMG/less_icon.png"> </a> </div> </template> Luego puede recibir todos los valores de input como una matriz en su código PHP, como este .
Es porque no ha usado el valor actualizado allí.
Primero, asigna un valor a window.s , y luego crea una variable que usa el valor de window.s desde el estado inicial, y en cada adición, simplemente agrega el mismo fieldHtml . Por lo tanto, está obteniendo el mismo valor.
Aquí está la respuesta, usted está buscando:
<div><button class="add_button">click me</button></div> <div class="field_wrapper"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript"> window.s = 1; </script> <script type="text/javascript"> $(document).ready(function() { var addButton = $('.add_button'); var wrapper = $('.field_wrapper'); var maxField = 10; $(addButton).click(function() { if (window.s < maxField) { window.s++; //Increment field counter let fieldHTML = generateLine(window.s); $(wrapper).append(fieldHTML); //Add field html } }); $(wrapper).on('click', '.remove_button', function(e) { e.preventDefault(); $(this).parent('div').remove(); //Remove field html s--; //Decrement field counter }); }); function generateLine(lineNumber){ return '<div style="margin-top:5px;"><input type="text3" name="pers' + lineNumber + '" placeholder="Nome e Cognome"/><input type="time" style=margin-left:3.5px; autocomplete="off"><input type="time" style=margin-left:3.5px; autocomplete="off"><a href="javascript:void(0);"class="remove_button" title="Rimuovi"><img src="IMG/less_icon.png"></a></div>'; } </script>