problems calculating percentage with array

1

greetings community I have a problem when calculating the percentage since now I use the input as an array and it does not work for me the minimum fields are 4 and the maximum fields are 14 I also have my function to add fields if I wish , but as I said it does not work for me and it does not calculate me, I append the codes.

anadircarrerascaballos.php file

<div class="row">
<div class="inputs">

<div id="ejemplar1">

<div class="input-field col s12 m3">
<input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
<label for="ejemplar">Ejemplar:</label>
</div>

<div class="input-field col s12 m2">
<input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
<label for="peso">Peso:</label>
</div>

<div class="input-field col s12 m2">
<input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.'  required/>
<label for="dividendo">Dividendo:</label>
</div>



<div class="input-field col s12 m2">
<input id="icon_prefix" type="text" class="black-text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="multiplica(this.form)"  required/>
<label for="porcentaje">porcentaje:</label>
</div>



 <div class="input-field col s12 m3">
 <input id="total" type="text" name="total[]" readonly/>
 <label for="total">Total:</label>
 </div>

 </div>




  <div id="ejemplar2">

 <div class="input-field col s12 m3">
 <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
 <label for="ejemplar">Ejemplar:</label>
 </div>

 <div class="input-field col s12 m2">
  <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
  <label for="peso">Peso:</label>
  </div>

 <div class="input-field col s12 m2">
 <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' required/>
   <label for="dividendo">Dividendo:</label>
 </div>



   <div class="input-field col s12 m2">
   <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="multiplica(this.form)" pattern='[0-9]{1,2}' required/>
    <label for="porcentaje">porcentaje:</label>
    </div>

   <div class="input-field col s12 m3">
     <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
   <label for="total">Total:</label>
   </div>

   </div>





   <div id="ejemplar3">

  <div class="input-field col s12 m3">
  <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
  <label for="ejemplar">Ejemplar:</label>
  </div>

  <div class="input-field col s12 m2">
  <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
   <label for="peso">Peso:</label>
   </div>

   <div class="input-field col s12 m2">
   <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' required/>
   <label for="dividendo">Dividendo:</label>
   </div>



  <div class="input-field col s12 m2">
  <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="multiplica(this.form)" pattern='[0-9]{1,2}' required/>
  <label for="porcentaje">porcentaje:</label>
   </div>

   <div class="input-field col s12 m3">
    <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
   <label for="total">Total:</label>
   </div>

   </div>



   <div id="ejemplar4">

   <div class="input-field col s12 m3">
   <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
    <label for="ejemplar">Ejemplar:</label>
    </div>

    <div class="input-field col s12 m2">
    <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
      <label for="peso">Peso:</label>
     </div>

    <div class="input-field col s12 m2">
    <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' required/>
     <label for="dividendo">Dividendo:</label>
    </div>



     <div class="input-field col s12 m2">
     <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="multiplica(this.form)" pattern='[0-9]{1,2}' required/>
       <label for="porcentaje">porcentaje:</label>
      </div>

      <div class="input-field col s12 m3">
      <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
     <label for="total">Total:</label>
      </div>

     </div>



    </div>
    </div>

function multiply

    <script language="javascript">
     function multiplica(form){
     var resultado;
     var x=0;
     var y=0;
     x = parseInt (form.dividendo[].value);
     y = parseInt (form.porcentaje[].value);

     resultado = x * y;

     form.total[].value=resultado;
        }
     </script>

funcion_agregar_campos.js

var inputs = 4;
$(document).ready(function(e) {
$('#agregar').on('click', function() {
if (inputs == 14) {
  return false;
   }
  inputs = inputs + 1;
  if ($('#ejemplar' + inputs + '').length > 0) {
  $('#ejemplar' + inputs + '').show();
  } else {


    $('.inputs').append('<div id="ejemplar'+inputs+'"><div class="input-field col s12 m3"><input id="ejemplar" type="text" name="ejemplar[]" autocomplete="off"  title="no pueden haber campos vacios, solo se permiten letras." pattern="[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+" required/><label for="ejemplar">Ejemplar:</label></div><div class="input-field col s12 m2"><input id="peso" type="text" name="peso[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." pattern="[0-9]{2,2}" required/><label for="peso">Peso:</label></div><div class="input-field col s12 m2"><input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." pattern="[0-9]{2,2}" required/><label for="dividendo">Dividendo:</label></div><div class="input-field col s12 m2"><input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." pattern="[0-9]{2,2}" required/><label for="porcentaje">porcentaje:</label></div><div class="input-field col s12 m3"><input id="total" type="text" name="total[]" autocomplete="off" readonly/><label for="total">Total:</label></div></div>');



     }

      $('#quitar').fadeIn();
      if (inputs == 14) {
      $('#agregar').fadeOut();

        }
         });
          $('#quitar').on('click', function() {
           if (inputs == 4) {
           return false;
           }
              $('#ejemplar' + inputs + '').hide();
              inputs = inputs - 1;
              $('#agregar').fadeIn();
              if (inputs == 4) {
              $('#quitar').fadeOut();
             }
            });
           });

sample image

    
asked by yoclens 29.01.2018 в 17:24
source

2 answers

1

I have modified your html code as well as the multiply function to show you a valid example. This calculates total according to the values in dividend and percentage.

     function multiplica(form){
     var resultado;
     var x=0;
     var y=0;
     
     x = parseInt(form.porcentaje.value);
     y = parseInt(form.dividendo.value);
   
     resultado = x * y;
     

      form.total.value = resultado;
     
        }
     
<html>
<body>
    <form>        
        
        <div id="ejemplar1">
            
            <div class="input-field col s12 m3">
                <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
                <label for="ejemplar">Ejemplar:</label>
            </div>
            
            <div class="input-field col s12 m2">
                <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
                <label for="peso">Peso:</label>
            </div>
            
            <div class="input-field col s12 m2">
                <input id="dividendo" type="text" name="dividendo" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.'  required/>
                <label for="dividendo">Dividendo:</label>
            </div>
            
            
            
            <div class="input-field col s12 m2">
                <input id="icon_prefix" type="text" class="black-text" name="porcentaje" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onblur="multiplica(this.form)"  required/>
                <label for="porcentaje">porcentaje:</label>
            </div>
            
            
            
            <div class="input-field col s12 m3">
                <input id="total_result" type="text" name="total" readonly/>
                <label for="total">Total:</label>
            </div>
            
        </div>
        
    </form>
</body>
</html>
    
answered by 30.01.2018 / 10:05
source
0

Example of how to use the Input arrays

function readInputArray() {
  $('input[name^="field_name"]').each(function() {
      console.log($(this).val());
  });
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="2" name="field_name[1]">
<input type="text" value="1" name="field_name[2]">

<button onclick="readInputArray()">Test Array Fields</button>
    
answered by 31.01.2018 в 09:25