Hola.
Estoy aprendiendo sobre jquery y javascript, y estoy en la parte donde puedo modificar cosas sin necesidad de recargar la página, como AJAX, pero estoy haciendo un formulario donde tengo una duda, les explico.
Tengo esta funcion que es para agregar nuevos campos al formulario.
$(function(){
let p = 0;
$('#add').click(function(){
p++;
$('#tabla_dina').append('<tr id="row'+p+'">\
<td><input type="text" class="form-control"></td>\
<td><input type="text" class="form-control"></td>\
<td><textarea class="form-control"></textarea></td>\
<td><input id="B_producto" type="text" class="form-control"></td>\
<td><input id="B_marca" type="text" class="form-control"></td>\
<td><input id="B_modelo" type="text" class="form-control"></td>\
<td><input id="P_precios" type="text" class="form-control"></td>\
</tr>');
});
Ahora deseo poder sumar todos los inputs que se hagan con id = "P_precios" y al investigar lo intente de varias formas, pero no logro hacer que se sumen todos los inputs de "P_precios", solo logro hacer que en el input de "Resultado" que esta directamente en el body del archivo, me aparezca el numero del primer campo, y cuando le doy agregar para poner otros campos, no se suman los datos de todos los "P_precio" ni se actualiza "Resultado", solo se actualiza Resultado con el primer campo pero no se suman como esperaría ni nada sin importar que haga.
Pareciera que each solo puede retomar el primer campo y no detecta los siguientes que van apareciendo cuando agrego más campos
$(function(){
$(document).on('input', "#P_precios", function(){
let calc_sum = 0;
$("#P_precios").each(function(){
let get_v_txt = $(this).val();
if($.isNumeric(get_v_txt)){
calc_sum += parseFloat(get_v_txt);
$("#s_total").val(calc_sum);
}
});
});
});
¿Alguien sabe que puedo estar haciendo mal?
Hola, una cosa que te recomendaria es que uses identación correcta al postear códigos algo que veo mal en el code es que tienes muchos #P_precios y # es para los id mientras que si tienes muchos deberìas tenerlos en una misma clase lo cual se asume con . o al menos un mismo nombre no un mismo id, tal vez por eso toma uno solo.
Hola, no deberías estar estudiando sobre tecnología obsoleta, hace muchos años que se dejó de usar jquery, por ahi por la época de flash cuando apareció html5. Deberías aprender a utilizar javascript puro a traves de la manipulación del DOM.
De todas maneras tu código tienes malas prácticas y tiene XSS ya que "'<tr id="row'+p+'">..." la variable "p" no está escapada en htmlentities por lo cual puede ser susceptible a XSS y tener problemas de seguridad, en ves de eso debes fabricar los nodos con document.createElement y asignarle el valor con innerText ya que el DOM de javascript escapa de forma automática los valores y propiedades, escribir html dentro de javascrpt en texto plano es una muy mala práctica, en los años 2000 se hacía eso pero hoy se recomienda utilizar nodos y templates, por ejemplo:
const template = (new DOMParser).parseFromString(`
<div class="col-md-6">
<p></p>
</div>
`, 'text/html');
template.querySelector('p').innerText = p;
root.appendChild(template);
Tampoco deberías utilizar ajax, hoy en día existe el estandar ES6 y tienes disponible la función fetch asincrónica, no necesitas agregar carga adiconal al navegador, hoy en día los navegadores están muy estandarizados, ya no se necesitan frameworks como jquery cuando se usaba internet explorer 6.