Sum inputs and calculate based on total
by akmiecik
HTML
<div id="swim_row_one">
<div class="span2"><span>Laps: <small><input name="m_or_y" type="checkbox" id="m_or_y" > (meters)</small></span>
<input onchange=lapsSum() pattern="[0-9]*" inputmode="decimal" type="number" id="laps" size="2" maxlength="2" name="laps"">
</div>
<div class='span2'>Yards: <input name='yards' id='swim_distance_y'></div>
<div class='span2'>Meters: <input name='meters' id='swim_distance_m'></div>
<span>Split 1</span><input onchange='lapsSum(); totalYards()' type=number inputmode=decimal id=laps1 class='laps' size='1'>
<br>
<span>Split 2</span><input onchange=lapsSum() type=number inputmode=decimal id=laps2 class='laps' size='1'>
<br>
<span>Split 3</span><input onchange=lapsSum() type=number inputmode=decimal id=laps3 class='laps' size='1'>
<br>
</div>
JavaScript
function lapsSum(){
var sum = 0;
$('.laps').each(function(){
sum += parseFloat(this.value);
});
document.getElementById('laps').value = sum;
totalYards();
}
function totalYards() {
if (document.getElementById('m_or_y').checked == false) {
var yards = document.getElementById('laps').value*50;
var meters = document.getElementById('laps').value*50*0.9144;
document.getElementById('swim_distance_y').value=Math.ceil(yards);
document.getElementById('swim_distance_m').value=Math.ceil(meters)
}else if (document.getElementById('m_or_y').checked) {
var yards = document.getElementById('laps').value*50;
var meters = (document.getElementById('laps').value*50)/1.0936;
document.getElementById('swim_distance_y').value=Math.ceil(yards);
document.getElementById('swim_distance_m').value=Math.ceil(meters)
}
}