Как сплюсовать переменные jQuery чтобы их сумма сразу пересчитывалась при изменении любой из них?

Question

[max3wq]

Здравствуйте, есть input-ты c id #ar1, #ar2, #ar3, которые заполняются значениями по отдельности (необязательные, может быть заполнен всего один, может два).
Одновременно с их заполнением мне надо выводить сумму заполненых #ar1, #ar2, #ar3
Но моя формула начинает считать только когда все три заполнены. Как правильно написать чтобы sum=(ar1+ar2+ar3); считалось сразу же как только появзяются значения в полях #ar1, #ar2, #ar3 при этом независимо одно или все три заполнены?
Щас работает но только когда появляются все три.

jQuery(document).ready(function(){
var ce1;
var ce2;
var ce3;
var ps1;
var ps2;
var ps3;
var ar1;
var ar2;
var ar3;
var sum;
  
	jQuery("#ce1").on("input", function() {
ce1= this.value ; 
ps1=(ce1*1);
ar1=(((ps1*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps").val(ps1.toFixed());	
jQuery("#ar").val(ar1.toFixed()); 
});
	
	jQuery("#ce2").on("input", function() {
ce2= this.value ; 
ps2=(ce2*1);
ar2=(((ps2*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps2").val(ps2.toFixed());	
jQuery("#ar2").val(ar2.toFixed()); 
});
	
	jQuery("#ce3").on("input", function() {
ce3= this.value ; 
ps3=(ce3*1);
ar3=(((ps3*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps3").val(ps3.toFixed());	
jQuery("#ar3").val(ar3.toFixed()); 
});

jQuery("#ce1, #ce2, #ce3").on("input", function() {
			sum=(ar1+ar2+ar3);
			jQuery("#sum").val(sum.toFixed());
			});

	});
</script>

Comments

[Алексей]

Написать функцию сложения и вызывать ее при изменении значения инпута.
Ну и как бы можно передавать и 0 если инпут пустой

jQuery("#ce1").on("input", function() {
ce1= this.value || 0; <= Вот сюда, и возвращать его не выполняя условия ниже.
ps1=(ce1*1);
ar1=(((ps1*1000)/250)*(0.941*1.65)*1.6);
jQuery("#ps").val(ps1.toFixed());	
jQuery("#ar").val(ar1.toFixed()); 
});

Answer 1

[FeST1VaL]

Я бы сделал примерно так... подкорректируйте под себя) Суть в эвенте change. Он вызывается когда изменяется значение в input. И если его вызвать самому, как я сделал когда передавал значения... .trigger("change")

Comments

[max3wq]

Здравствуйте, очень хорошее решение, даже id само перебирает. Возник еще один вопрос - чем заменить в теории data-id? Каждому пункту я назначаю цену. На которую в итоге будет умножаться. Но проблема в том что Contact form 7 для вордпресс имеет определенный набор полей, и она обрезает data-id. Я могу назначить по стандарту только класс и id. Цену думал писать во второй класс. Или это плохое решение?

Сейчас пробую добавить это поле в фильтр разрешенных атрибутов этого плагина, но в теориии зачем он? Он удобен для задания цен но пока не могу data-id задать

[FeST1VaL]

max3wq, ну класс это такое себе решение, ну в крайнем случае я бы сделал вместоdata-id просто id т.е убрал бы ce из id и поменял в скрипте let id = self.attr('data-id'); на let id = self.attr('id');

[max3wq]

Ок, большое спасибо! Я немного подкоректировал. Иначе сумму считало неверно) Брало по два раза значения. Так все ок.

Не получается вставить код но закоментировал строки
// $('.input_value').each(function() {

// });

Так же дополнил это дело кодом который присваивает выпадающим спискам цены

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose a weather condition</option>
    <option>Sun</option>
    <option>Clouds</option>
    <option>Snow</option>
    <option>Rain</option>
    <option>Windy</option>
</select>

jQuery(document).ready(function() {
    Price = ["", "100", "200", "300", "400", "500"];
    jQuery.each(jQuery("#cd-dropdown option"), function(index, value) {
        jQuery(this).val(Price[index]);
    });
    //do SimpleDropDownEffects plugin here after classes are added.
});

На выходе получаем:

<select id="cd-dropdown" class="cd-select">
    <option value="" selected="">Choose a weather condition</option>
    <option value="100">Sun</option>
    <option value="200">Clouds</option>
    <option value="300">Snow</option>
    <option value="400">Rain</option>
    <option value="500">Windy</option>
</select>

И в итоге должно получится полноценный рассчет цен при заполнении ContactForm7 для вордпресс. Рассчет с отправкой всех полей на емайл сразу.
Калькулятор из ContactForm7 другими словами.

[max3wq]

Еще одна редакция, пришлось всетаки дополнительно обнулять значение между функциями, а эту вернуть. Потому что в примере первый раз считает правильно, потом второй раз при изменении чисел их плюсует к первоначальным когда полная сумма.

Привожу код как получилось, чтобы правильно считалось при изменении чисел.

$('.input_change').change(function() {
  let self = $(this);
   let id = self.attr('id');
  let value = parseInt(self.val());
  let inputValue = $('#ar'+ id); 
 	let formula = getFormula(value);
  inputValue.val(formula).trigger('change');
});

function getFormula(value) {
	return (value * 10);
}
let sum = 0;

$('.input_value').change(function() {
let sum = 0;
$('.input_value').each(function() {
  	let value = parseFloat($(this).val());
   
 if(value) sum += value;
});
  
 $('.input_sum').val(sum);
});