Показать общие динамические переменные (php и javascript)

Question

У меня есть форма, которая включает в себя 2 ввода диапазона для установки $ целевых значений (как в приведенном ниже коде). При отправке формы хранит их в базе данных. Сохраненные значения на слайдер изначально отображаются, однако javascript показывает новые выбранные значения при перемещении ползунка диапазона.

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

<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label> 
<?php if (!empty($set_monday)) { ?> 
<input type="range" min="0" max="5000" id="monday" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue1(this.value)" /> 
<?php } else { ?> 
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" /> 
<?php } ?> 
<script type="text/javascript"> function showValue1(newValue) { document.getElementById("monday").innerHTML=newValue;} </script> 


<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label> 
<?php if (!empty($set_tuesday)) { ?> 
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue2(this.value)" /> 
<?php } else { ?> 
<input type="range" min="0" max="5000" id="tuesday" name="tuesday" value="0" step="50" oninput="showValue2(this.value)" /> 
<?php } ?> 
<script type="text/javascript"> function showValue2(newValue) { document.getElementById("tuesday").innerHTML=newValue;} </script> 


<label>Total Target = $ 
<?php 
$sum_total = $set_monday + $set_tuesday; 
echo number_format($sum_total); 
?> 
</label> 

Я не могу работать, как добавить вывод функций и микширование, добавив PHP и яваскрипт переменных, может кто-нибудь помочь?

Answer 1

Оба пролета внутри ярлыков и идентификаторы ввода одинаковы, это неправильно. Убедитесь, что элементы HTML имеют уникальные идентификаторы. Кроме того, для вычисления суммы динамически необходим javascript. Исходя из этого, ваш код должен выглядеть следующим образом:

<label for="monday">Monday - $<span id="monday"><?php echo number_format($set_monday) ?> </span></label> 
<?php if (!empty($set_monday)) : ?> 
<input type="range" min="0" max="5000" id="mondayRange" name="monday" value=<?php echo $set_monday ?> step="100" oninput="showValue(this)" /> 
<?php else : ?> 

<input type="range" min="0" max="5000" id="mondayRange" name="monday" value="0" step="50" oninput="showValue(this)" /> 
<?php endif; ?> 

<label for="tuesday">Tuesday - $<span id="tuesday"><?php echo number_format($set_tuesday) ?></span></label><br> 
<?php if (!empty($set_tuesday)) : ?> 
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value=<?php echo $set_tuesday ?> step="100" oninput="showValue(this)" /> 
<?php else : ?> 
<input type="range" min="0" max="5000" id="tuesdayRange" name="tuesday" value="0" step="50" oninput="showValue(this)" /> 
<?php endif; ?> 


<label id="total">Total Target = $ 
<?php 
$sum_total = $set_monday + $set_tuesday; 
echo number_format($sum_total); 
?> 
</label> 

<script type="text/javascript"> 
    function showValue(range) 
    { 
     var sum = parseInt(document.getElementById('mondayRange').value) + parseInt(document.getElementById('tuesdayRange').value); 

     document.getElementById(range.id.substr(0, range.id.length - 5)).innerHTML = range.value; 
     document.getElementById('total').innerHTML = 'Total Target = $' + sum; 
    } 
</script>