0

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

 $(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>

1 respuesta 1

0

Tu pregunta se puede resolver por partes:

Con respecto a cómo sumar el valor del option seleccionado en un select, el propio elemento HTMLSelectElement te provee de un atributo value al que puedes acceder. Este atributo te devuelve el valor del option que sea seleccionado.

Un ejemplo en vanillaJS sería:

const selectElement = document.querySelector('#my-select');


selectElement.addEventListener('change', () => {
  console.log(selectElement.value);
})
<select id="my-select">
  <option value="1">Primera Opción</option>
  <option value="2">Segunda Opción</option>
  <option value="3">Tercera Opción</option>
</select>

y en jQuery el mismo ejemplo sería:

$(document).on('change', '#my-select', () => {
  const value = $('#my-select').val();
  console.log(value);
});
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  
<select id="my-select">
  <option value="1">Primera opción</option>
  <option value="2">Segunda opción</option>
  <option value="3">Tercera opción</option>
</select>

Con respecto a cómo actualizar el valor de un select en "tiempo real" sencillamente con hacerte una función que actualice el valor del select automáticamente seleccionará el option que tú le indiques si existe.

De nuevo, un ejemplo en vanillaJS:

const button = document.querySelector('#my-button');
const select = document.querySelector('#my-select');

button.addEventListener('click', () => {
  select.value = 2;
})
<select id="my-select">
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
</select>

<button id="my-button">MI BOTÓN</button>

Y el mismo ejemplo en jQuery:

$(document).on('click', $('#my-button'), () => {
  $('#my-select').val(2);
});
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<select id="my-select">
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
</select>

<button id="my-button">MI BOTÓN</button>

Con respecto a la suma de valores en un botón, sencillamente puedes cambiar el tipo del input a button añadiéndo al tag type="button".

<input id="my-regular-input" value="SOY UN INPUT NORMAL">
<input id="my-type-button-input" value="SOY UN INPUT TYPE BUTTON" type="button">

Con respecto a la suma de valores separadas por tipos es probable que la estructura que sigues actualmente no te vaya a ser completamente útil.

La idea que se me ocurre es que podrías generar por cada "grupo de elementos" un objeto y operar con esos objetos. Un ejemplo breve podría ser:

const getAllValues = () => {
  const values = [];

  const inputGroups = document.querySelectorAll('.input-group');
  const inputGroupsArray = Array.from(inputGroups);
  
  inputGroupsArray.forEach((inputGroup) => {
    const inputGroupObject = {};
    
    inputGroupObject.type = inputGroup.querySelector('.type').value;
    inputGroupObject.value = inputGroup.querySelector('.value').value;
    
    values.push(inputGroupObject);
  });
  
  return values;
}

const getAlbums = values => values.filter(element => element.type === "1")
const getRecopilatories = values => values.filter(element => element.type === "2")
const getDiscographies = values => values.filter(element => element.type === "3")

const getTypeTotal = elements => elements.reduce((prev, curr) => parseInt(prev.value) + parseInt(curr.value));

const updateGrandTotalValue = () => {
  const allValues = getAllValues();
  const grandTotalButton = document.querySelector('#grand-total');
  
  const albumsCollection = getAlbums(allValues);
  const recopilatoriesCollection = getRecopilatories(allValues);
  const discographiesCollection = getDiscographies(allValues);
  
  const albumsPartialTotal = getTypeTotal(albumsCollection);
  const recopilatoriesPartialTotal = getTypeTotal(recopilatoriesCollection);
  const discographiesPartialTotal = getTypeTotal(discographiesCollection);
  
  const buttonValue = `Grand Total: Álbum: ${albumsPartialTotal}, Recopilatorio: ${recopilatoriesPartialTotal}, Discografía: ${discographiesPartialTotal}`;
  
  grandTotalButton.value = buttonValue;  
}

updateGrandTotalValue();
<div class="input-group">
  <select class="type">
    <option value="1">Álbum</option>
    <option value="2" selected>Recopilatorio</option>
    <option value="3">Discografía</option>

  </select>
  <input class="value" value="11" readonly>
</div>

<div class="input-group">
  <select class="type">
    <option value="1" selected>Álbum</option>
    <option value="2">Recopilatorio</option>
    <option value="3">Discografía</option>

  </select>
  <input class="value" value="22" readonly>
</div>

<div class="input-group">
  <select class="type">
    <option value="1">Álbum</option>
    <option value="2">Recopilatorio</option>
    <option value="3" selected>Discografía</option>

  </select>
  <input class="value" value="33" readonly>
</div>

<div class="input-group">
  <select class="type">
    <option value="1">Álbum</option>
    <option value="2" selected>Recopilatorio</option>
    <option value="3">Discografía</option>

  </select>
  <input class="value" value="44" readonly>
</div>

<div class="input-group">
  <select class="type">
    <option value="1" selected>Álbum</option>
    <option value="2">Recopilatorio</option>
    <option value="3">Discografía</option>

  </select>
  <input class="value" value="55" readonly>
</div>

<div class="input-group">
  <select class="type">
    <option value="1">Álbum</option>
    <option value="2">Recopilatorio</option>
    <option value="3" selected>Discografía</option>

  </select>
  <input class="value" value="66" readonly>
</div>

<input id="grand-total" type="button" value="Grand Total: Álbum: 0, Recopilatorio: 0, Discografía: 0">

Estas son las ideas que se me ocurren para solucionar tu casuística. ¡Espero que te sirvan!

1
  • Ok, muchas Gracias por tu ayuda! voy a probarlo
    – user129405
    Commented el 22 may. 2019 a las 17:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.