Estoy intentando lo siguiente:
Tengo los siguientes input
con el siguiente código HTML:
<div class="ing_guiGrid col6">
<p>
<label for="id_observa">Observaciones:</label>
<textarea name="observa" cols="40" rows="10" maxlength="500" required="required" id="id_observa"></textarea>
</p>
<p>
<label for="id_tipo_envio">Envio:</label>
<input type="number" name="tipo_envio" required="required" id="id_tipo_envio" class="tipo_envio">
</p>
<p>
<label for="id_descripcion">Descripcion:</label>
<input type="text" name="descripcion" maxlength="150" required="required" id="id_descripcion" class="descripcion">
</p>
<p>
<label for="id_cantidad">Cantidad:</label>
<input type="number" name="cantidad" min="0" value="0" required="required" id="id_cantidad" class="cantidad">
</p>
<p>
<label for="id_peso">Peso:</label>
<input type="number" name="peso" min="0" value="0" step="any" required="required" id="id_peso" class="peso">
</p>
<p>
<label for="id_precio">Tarifa:</label>
<input type="number" name="precio" min="0" value="0" step="any" required="required" id="id_precio" class="precio">
</p>
</div>
<div id="newRow"></div>
<div>
<button id="addRow" type="button" class="btn btn-info"><i class="fas fa-plus"></i></button>
</div>
CSS:
textarea#id_observaciones {
resize: none;
height: 39px;
}
.ing_guiGrid{
display: grid;
gap: 20px;
}
.ing_guiGrid.col6{
grid-template-columns: 1fr 0.5fr 2.5fr 1fr 1fr 1fr;
gap: 0;
}
.ing_guiGrid.col6 input,
.ing_guiGrid.col6 textarea{
width: 100%;
}
.ing_guiGrid.col6 p:nth-child(1){
margin-right: 20px;
}
.ing_guiGrid input{
width: 100%;
}
el cual se ve así:
Y tengo su funcionalidad, que es, cuando se escribe un número en el input
.tipo_envio
por medio de Ajax se llama a la descripción en su respectivo input
, el Ajax es el siguiente:
function buscarProducto(){
var codigo = $(".tipo_envio").val();
if(codigo===""){
return false;
}
var path = "{% url 'api:producto_list' %}" + codigo;
$.ajax({
type:"GET",
url: path,
success: function(r){
console.log(r);
console.log(r.estado);
if(!r.estado){
mensaje("Producto No Tiene Existencia o está inactivo",'orange')
$(".tipo_envio").val("");
$(".descripcion").val("");
$(".precio").val("0.00");
$(".tipo_envio").focus();
return false;
}
$(".tipo_envio").val(r.id);
$(".descripcion").val(r.descripcion);
$(".precio").val(r.precio);
$(".tipo_envio").focus();
},
error: function(a,b,c){
console.log(a);
if(a.status==404){
mensaje("Producto -" + codigo + "- No Encontrado o No Existe",'red');
$(".tipo_envio").val("");
$(".descripcion").val("");
$(".precio").val("0.00");
$(".tipo_envio").focus();
}
}
});
}
llamo a esta función con un change en Jquery:
$(".tipo_envio").change(function(){
buscarProducto();
});
Y todo resulta bien, el problema es cuando intento usar la misma función con otros input
, tengo un botón que agrega los elementos por medio de JavaScript:
$("#addRow").click(function () {
var html = '';
html += '<div class="ing_guiGrid col6">';
html += '<p><button id="removeRow" type="button" class="btn btn-danger"><i class="fas fa-times-circle"></i></button></p>';
html += '<p><input type="number" name="tipo_envio" required="required" id="id_tipo_envio" class="tipo_envio"></p>';
html += '<p><input type="text" name="descripcion" maxlength="150" required="required" id="id_descripcion" class="descripcion"></p>';
html += '<p><input type="number" name="cantidad" min="0" value="0" required="required" id="id_cantidad" class="cantidad"></p>';
html += '<p><input type="number" name="peso" min="0" value="0" step="any" required="required" id="id_peso" class="peso"></p>';
html += '<p><input type="number" name="precio" min="0" value="0" step="any" required="required" id="id_precio" class="precio"></p>';
html += '</div>';
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('.ing_guiGrid').remove();
});
Y quiero que los .tipo_envio
que se van agregando tengan la misma funcionalidad que el original, o sea el input
que se ve al iniciar la página, no puedo crearle una función a cada uno ya que el usuario puede agregar hasta 100 nuevos input
.
Lo que intenté fue meterlo dentro de un forEach a modo de que cada .tipo_envio
pudiera llamar a la función cuando se cambia el número del campo. El código es el siguiente:
$('#addRow').click(function(){
var a = document.querySelectorAll(".tipo_envio")
a.forEach(function(e){
e.addEventListener('change', function(){
buscarProducto()
})
})
});
Esto sí que llamó a buscarProducto()
y tuvo la misma funcionalidad, sin embargo, lo que pasa es que no me permite cambiar de número, por más que intente hacer que me deje cambiar el número en el campo .tipo_envio
que se acaba de crear para cambiar la descripción, no puedo. Y me muestra la misma descripción del primer .tipo_envio
de esta manera:
Estos datos van dentro de un formulario, por ende los envió a una base de datos donde se guardan todos los datos que el usuario ingrese. Espero puedan ayudarme, Gracias de antemano!.
EDIT:
Ahora tengo los siguientes problemas:
Al cambiar el número en el .tipo_envio
principal no me llama la función y no cambia la descripción:
Hasta que pongo agrego un nuevo .tipo_envio
y lo pongo en valor "0" cambia tanto el nuevo como el anterior .tipo_envio
:
Y pasa algo similar con los demás que se van agregando:
Solo que en estos si pongo el número repetido no me da la descripción, por ejemplo si pongo en un .tipo_envio
el mismo número que introduje en el anterior, no me llama la descripción correspondiente hasta que pongo un número mayor y no quiero eso por que el usuario puede agregar las veces que le sea necesario el mismo tipo de envio.
document.querySelectorAll('#id-repetido');
te devuelve todos los elementos encontrados, al querer modificar el valor con$('#id-repetido').val()
se aplica solo al primero que encuentra. La respuesta que te sugerí en el primer comentario te va a servir. Intenta adaptar el concepto en tu proyecto y, si no puedes, edita nuevamente la pregunta para poner lo que intentaste y poderte ayudar con algo más concreto.