Skip to main content
Eliminados tags <script> del código JS de la demo, ya que el parser da error, añadido jQuery al html
Origen Enlace
<script>

 $(document).ready(function () {
    $(".add").click(function () {
        var length = $('.one').length;
        var cloned = $(this).closest('.one').clone(true);        
        cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
        cloned.find(':input:not(".sno")').val(" ");
        var parent = $(this).closest('.one');
        calculate(parent);
    });
    $('.delete').click(function () {
        var parent = $(this).closest('.one');
        $(this).parents(".one").remove();
        calculate(parent);
    });
});

$(document).on('keyup', '.tbs, .ndiscos', function () {
    var parent = $(this).closest('.one');
    calculate(parent);
})


function calculate(e){
    
    var tbs = +$(e).find('.tbs').val(); //Valor de tbs
    var ndiscos = +$(e).find('.ndiscos').val();//Valor  del nº de Discos
    var sum = 0;
    $(e).find('.total').val(tbs*ndiscos);

    $('.total').each(function(i,e){
        sum += +$(e).val();        
    });

    $('#Grand').val(sum);
};



    </script>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<div class="container">
   
   <div id="mainDiv">

    <div class="row one">
            <div class="col-lg-3">
                <select class="tipoDisco calculaselect" id="tipoDisco" name="tipoDisco" data-rule-required="true" title="Choose Group Size...">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                </select>
            </div>   
            <div class="col-lg-2">
                <input type="text" name="tbs" class="tbs">
                <label>TBS</label>
            </div>
            <div class="col-lg-3">
                <input type="text" name="ndiscos" class="ndiscos">
                <label>Nº de Discos</label>
            </div>
            <div class="col-lg-2">
                <input type="text" name="total" class="total">
                <label for="total">total</label>
            </div>
            <div class="col-lg-2">
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>

            </div>
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>

            </div>
            </div>
            
    </div>
    </div>
    <div class="row">
    <div class="col-lg-12">
    <input type="text" name="Grand" id="Grand">
    <label for="net_rate">Grand Total</label>
    </div>
</div>




                            </div>


 
</div>
<script>

 $(document).ready(function () {
    $(".add").click(function () {
        var length = $('.one').length;
        var cloned = $(this).closest('.one').clone(true);        
        cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
        cloned.find(':input:not(".sno")').val(" ");
        var parent = $(this).closest('.one');
        calculate(parent);
    });
    $('.delete').click(function () {
        var parent = $(this).closest('.one');
        $(this).parents(".one").remove();
        calculate(parent);
    });
});

$(document).on('keyup', '.tbs, .ndiscos', function () {
    var parent = $(this).closest('.one');
    calculate(parent);
})


function calculate(e){
    
    var tbs = +$(e).find('.tbs').val(); //Valor de tbs
    var ndiscos = +$(e).find('.ndiscos').val();//Valor  del nº de Discos
    var sum = 0;
    $(e).find('.total').val(tbs*ndiscos);

    $('.total').each(function(i,e){
        sum += +$(e).val();        
    });

    $('#Grand').val(sum);
};



    </script>
<div class="container">
   
   <div id="mainDiv">

    <div class="row one">
            <div class="col-lg-3">
                <select class="tipoDisco calculaselect" id="tipoDisco" name="tipoDisco" data-rule-required="true" title="Choose Group Size...">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                </select>
            </div>   
            <div class="col-lg-2">
                <input type="text" name="tbs" class="tbs">
                <label>TBS</label>
            </div>
            <div class="col-lg-3">
                <input type="text" name="ndiscos" class="ndiscos">
                <label>Nº de Discos</label>
            </div>
            <div class="col-lg-2">
                <input type="text" name="total" class="total">
                <label for="total">total</label>
            </div>
            <div class="col-lg-2">
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>

            </div>
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>

            </div>
            </div>
            
    </div>
    </div>
    <div class="row">
    <div class="col-lg-12">
    <input type="text" name="Grand" id="Grand">
    <label for="net_rate">Grand Total</label>
    </div>
</div>




                            </div>


 
</div>
 $(document).ready(function () {
    $(".add").click(function () {
        var length = $('.one').length;
        var cloned = $(this).closest('.one').clone(true);        
        cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
        cloned.find(':input:not(".sno")').val(" ");
        var parent = $(this).closest('.one');
        calculate(parent);
    });
    $('.delete').click(function () {
        var parent = $(this).closest('.one');
        $(this).parents(".one").remove();
        calculate(parent);
    });
});

$(document).on('keyup', '.tbs, .ndiscos', function () {
    var parent = $(this).closest('.one');
    calculate(parent);
})


function calculate(e){
    
    var tbs = +$(e).find('.tbs').val(); //Valor de tbs
    var ndiscos = +$(e).find('.ndiscos').val();//Valor  del nº de Discos
    var sum = 0;
    $(e).find('.total').val(tbs*ndiscos);

    $('.total').each(function(i,e){
        sum += +$(e).val();        
    });

    $('#Grand').val(sum);
};
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<div class="container">
   
   <div id="mainDiv">

    <div class="row one">
            <div class="col-lg-3">
                <select class="tipoDisco calculaselect" id="tipoDisco" name="tipoDisco" data-rule-required="true" title="Choose Group Size...">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                </select>
            </div>   
            <div class="col-lg-2">
                <input type="text" name="tbs" class="tbs">
                <label>TBS</label>
            </div>
            <div class="col-lg-3">
                <input type="text" name="ndiscos" class="ndiscos">
                <label>Nº de Discos</label>
            </div>
            <div class="col-lg-2">
                <input type="text" name="total" class="total">
                <label for="total">total</label>
            </div>
            <div class="col-lg-2">
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>

            </div>
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>

            </div>
            </div>
            
    </div>
    </div>
    <div class="row">
    <div class="col-lg-12">
    <input type="text" name="Grand" id="Grand">
    <label for="net_rate">Grand Total</label>
    </div>
</div>




                            </div>


 
</div>
Origen Enlace

formulario que suma el valor de un select

buenas tardes y gracias de antemano por vuestra ayuda ante mis dudas.

Tengo un formulario que multiplica valores y suma los totales de las filas a medida que estas se van incrementando. El problema que tengo es que no sé como sumar el valor del option seleccionado en el select y que este se actualize tambien con respecto al número de filas en tiempo real. Tambien quiero mostrar el total completo con un botón en vez de en un input y que sume lineas dependiendo del tipo de option elegido; es decir las lineas que contienen un tipo de valor del option por un lado y las lineas que contienen otro tipo de option, por otro

<script>

 $(document).ready(function () {
    $(".add").click(function () {
        var length = $('.one').length;
        var cloned = $(this).closest('.one').clone(true);        
        cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
        cloned.find(':input:not(".sno")').val(" ");
        var parent = $(this).closest('.one');
        calculate(parent);
    });
    $('.delete').click(function () {
        var parent = $(this).closest('.one');
        $(this).parents(".one").remove();
        calculate(parent);
    });
});

$(document).on('keyup', '.tbs, .ndiscos', function () {
    var parent = $(this).closest('.one');
    calculate(parent);
})


function calculate(e){
    
    var tbs = +$(e).find('.tbs').val(); //Valor de tbs
    var ndiscos = +$(e).find('.ndiscos').val();//Valor  del nº de Discos
    var sum = 0;
    $(e).find('.total').val(tbs*ndiscos);

    $('.total').each(function(i,e){
        sum += +$(e).val();        
    });

    $('#Grand').val(sum);
};



    </script>
<div class="container">
   
   <div id="mainDiv">

    <div class="row one">
            <div class="col-lg-3">
                <select class="tipoDisco calculaselect" id="tipoDisco" name="tipoDisco" data-rule-required="true" title="Choose Group Size...">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                </select>
            </div>   
            <div class="col-lg-2">
                <input type="text" name="tbs" class="tbs">
                <label>TBS</label>
            </div>
            <div class="col-lg-3">
                <input type="text" name="ndiscos" class="ndiscos">
                <label>Nº de Discos</label>
            </div>
            <div class="col-lg-2">
                <input type="text" name="total" class="total">
                <label for="total">total</label>
            </div>
            <div class="col-lg-2">
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>

            </div>
            <div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>

            </div>
            </div>
            
    </div>
    </div>
    <div class="row">
    <div class="col-lg-12">
    <input type="text" name="Grand" id="Grand">
    <label for="net_rate">Grand Total</label>
    </div>
</div>




                            </div>


 
</div>