Mix Max Calc

by kidino

HTML

<form name="carts">
<div id="costs-ui">
    <div>
        <span class="space"> </span>
        <span class="min">Min</span>
        <span class="max">Max</span>
        <span class="cost">Cost</span>
    </div>
    <div id="row-area">
        <div class="row first-row">
            <span class="space"> </span>
            <input type="text" name="from" class="min disp" value="1" readonly />
            <input type="text" name="to" class="max" value="1" />
            <input type="text" name="cost" class="cost" />
        </div>
    </div>
    <div class="last-row">
        <span class="space"> </span>
        <input type="text" class="min disp" value=">=" readonly />
        <input type="text" class="max disp" name="morefrom" value="2" readonly />
        <input type="text" class="cost" value="we'll contact"/>
    </div>
</div>
</form>
    <button id="add-row">+ add row</button>


<div class="row-tmpl">
    <span class="space rem">X</span>
    <input type="text" name="from" class="min disp" readonly />
    <input type="text" name="to" class="max" />
    <input type="text" name="cost" class="cost" />
</div>

CSS

* { box-sizing: border-box; -moz-box-sizing: border-box; }
.min, .max {display: inline-block; width: 30px;}
.cost { width: 80px; }
.space { width:20px; display: inline-block; color: #ccc; cursor: pointer; }
.space:hover { color: #000; }
.row-tmpl { display: none; }
input[type=text] { border: 1px solid #bbb; }
.disp { background-color: #ddd; }

JavaScript

var form = document.carts;


$('#add-row').click(function(){
        var new_row = $('.row-tmpl').clone().removeClass('row-tmpl');    
        new_row.appendTo('#row-area')
        .addClass('row').show();   
        checkFrom();
});

$('#row-area').on('click','.rem', function() { 
    $(this).parent().remove(); 
    checkFrom();
});

$('#row-area').on('blur','.max', function() { 
    if (isNaN( parseInt( $(this).val() ) ) ) {
        $(this).val(0);
    } else {
        $(this).val( parseInt($(this).val() ) );
    }
    checkFrom();
});

	function checkFrom(){		
		for(var i=0;i<form.from.length;i++){
			if(form.from[i].value - 0 > form.to[i].value - 0){
				form.to[i].value = form.from[i].value;
			}
				
			if(i + 1 < form.from.length){
				form.from[i + 1].value = (form.to[i].value - 0) + 1;
			}
		}
		form.morefrom.value = (form.to[form.from.length - 1].value - 0) + 1;
	}