У меня есть форма в html, и мне нужно добавить входы при добавлении значения к ним (потерять фокус), я пробовал такой класс
function calcular_total() {
var importe_total = 0
$('.amt').keyup(function (){
$(".amt").each(
function(index, value) {
importe_total = importe_total + eval($(this).val());
console.log(importe_total);
}
);
});
$("#inputTotal").val(importe_total);
}
функция вызывается в готовом документе
$(document).ready(function(){
calcular_total();
});
html
Costos Servicios
Costo Logistica
Costo Infraestructura
Costo Contingencia
Costo Licencias
Otros Costos
Какие-то важные темы:
$("#inputTotal").val(importe_total);
был вне ее funciГіn keyup
равно как importe_total
$('.amt').keyup(function() {
var importe_total = 0
$(".amt").each(
function(index, value) {
if ( $.isNumeric( $(this).val() ) ){
importe_total = importe_total + eval($(this).val());
//console.log(importe_total);
}
}
);
$("#inputTotal").val(importe_total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td style="width:25%;">Costos Servicios</td>
<td style="width:25%;">
<input type="text" id="inputCostosServicios" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />
</td>
<td style="width:25%;">Costo Logistica</td>
<td style="width:25%;">
<input type="text" id="inputCostoLogistica" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />
</td>
</tr>
<tr>
<td style="width:25%;">Costo Infraestructura</td>
<td style="width:25%;">
<input type="text" id="inputCostoInfraestructura" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />
</td>
<td style="width:25%;">Costo Contingencia</td>
<td style="width:25%;">
<input type="text" id="inputCostoContingencia" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />
</td>
</tr>
<tr>
<td style="width:25%;">Costo Licencias</td>
<td style="width:25%;">
<input type="text" id="inputCostoLicencias" class="solo-numero amt" style="width:70% !important; text-align:right" value="0" />
</td>
<td style="width:25%;">Otros Costos</td>
<td style="width:25%;">
<input type="text" id="inputOtrosCostos1" style="width:70% !important; text-align:right" value="0" />
</td>
</tr>
<tr>
<td colspan="4">
<div style="text-align:right; margin-right:7%;">
<label style="margin-right:8px;">Total</label>
<input type="text" id="inputTotal" class="solo-numero" style="width:18% !important; margin-right:-2px; text-align:right" />
</div>
</td>
</tr>
</table>
Ну, ты звонишь в функцию calcular_total()
, которая внутри использует функцию пульса .keyup()
следовательно, никогда оно не будет функционировать.
ты Можешь тестировать с этим onChange()
обнаружь любое изменение в твоем неударе в лунку, когда пользователь продолжит писать немедленно, будут видны изменения в полном неударе в лунку.:
function suma() {
var add = 0;
$('.cl').each(function() {
if (!isNaN($(this).val())) {
add += Number($(this).val());
}
});
$('#sumAll').val(add);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Costos Servicios : <input id="Text1" class="cl" type="text" onChange="suma();" />
<br />
Costo Infraestructura : <input id="Text2" class="cl" type="text" onChange="suma();" />
<br />
Costo Licencias : <input id="Text3" class="cl" type="text" onChange="suma();" />
<br />
Total : <input id="sumAll" type="text" value="" />
<br />
Другой выбор, который также выполняет то же функционирование, состоит в том, чтобы ты оставил твой такой код как эта, кроме того, что событие keyup
не будет внутри функции а, что был внутри document.ready
Совет:
Уберегись importe_total = importe_total + eval($(this).val());
из-за importe_total+= eval($(this).val());