problems with .js function in form

Question

problems with .js function in form

Navigation

#1 by (1 votes)

0

I currently have two problems with these .js functions, the problem is this: if I add the <form class="col s12 m12 l12" action="anadircarrerascaballos.php" name="form" method="POST"> tag, the total function does not work, but if I remove it it works perfectly and my last problem is that From the aggregate input that would be 5,6,7,8 to 14, I do not calculate the dividend x the percentage and it does not show the total.

form

<form class="col s12 m12 l12" action="anadircarrerascaballos.php" name="form" method="POST">
<div class="row">

  <div class='input-field col s12 m4'>
    <input id='icon_email' class="black-text" type='text' name='fecha_carreras' 
    value='<?php echo date('d/m/Y');?>'  readonly/>
    <label for='titulo' class='black-text'>Fecha:</label>
  </div>
  <div class='input-field col s12 m4'>
    <input id='icon_email' class="black-text timepicker" type='text' name='hora_carreras' autocomplete='off' required/>
    <label for='titulo' class='black-text'>Hora:</label>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_carreras" id="id_carreras" required>
      <option value="" disabled selected>Carreras:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM carreras  ORDER BY id_carreras");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_carreras'] ;?>"><?php echo $linea['carreras'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_dias" id="id_dias" required>
      <option value="" disabled selected>Días:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM dias  ORDER BY id_dias");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_dias'] ;?>"><?php echo $linea['dias'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_distancia_carreras" id="id_distancia_carreras" required>
      <option value="" disabled selected>Distancia Carreras:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM distancia_carrera  ORDER BY id_distancia_carrera");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_distancia_carrera'] ;?>"><?php echo $linea['distancia_carrera'] ;?> Mtros</option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_hipodromo" id="id_hipodromo" required>
      <option value="" disabled selected>Hipódromos:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM hipodromo  ORDER BY id_hipodromo");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_hipodromo'] ;?>"><?php echo $linea['hipodromo'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>

</div>
<div class="header-title-left col s12 m6">
    <h5>Ejemplares a Registrar</h5>
</div>

<br>
<br>
<br>

<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.' onChange="total('ejemplar1')" 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.' onChange="total('ejemplar1')"  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}' onChange="total('ejemplar2')" 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.' onChange="total('ejemplar2')" 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}' onChange="total('ejemplar3')" 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.' onChange="total('ejemplar3')" 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}' onChange="total('ejemplar4')" 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.' onChange="total('ejemplar4')" 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>
<div class="center-align">
  <button id="agregar" type="button" class="btn waves-effect light-blue accent-4 btn-medium">+</button>
  <button id="quitar" type="button" style="display:none;" class="btn waves-effect light-blue accent-4 btn-medium">-</button>
  <button type="submit" name="guardar" class="btn waves-effect light-blue accent-4 btn-medium">Registrar</button>
  <button type="reset" class="btn waves-effect light-blue accent-4 btn-medium">Cancelar</button>
  <a href='carrera_caballos.php' button class='btn waves-effect light-blue accent-4 btn-medium' type='submit'>Volver</a>
</div>
<br>
<br>
</form>

total function

<script language="javascript">
function total(iddiv){
  var resultado;
  var x=0;
  var y=0;
  //obtengo el elemento input
  var divv = document.getElementById(iddiv);

  var inputv = divv.getElementsByTagName("input");  

  x = parseInt (inputv[2].value); // campo dividendo
  y = parseInt (inputv[3].value); //campo porcentaje

  resultado = x * y;

  inputv[4].value=resultado;  //se muestra valor en total
}
</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="ejemplarr'+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." onChange="total('ejemplarr')" 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." onChange="total('ejemplarr')" 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();
    }
  });
});

javascript

asked by yoclens 31.01.2018 в 18:26

source

1 answer

How to add several records at once with php and javascript Will not let me convert from int to int []

score 1 · Accepted Answer

1. When adding form does not calculate the total

Adding a <form> element effectively added a possible EventTarget that listens to the events of the child nodes.

The problem is that when trying to execute the method total() from:

<input id="dividendo" type="text" name="dividendo[]" autocomplete="off"
                           title='no pueden haber campos vacios, solo se permiten numeros.'
                           onChange="total('ejemplar1')" required/>

It meets the total identifier defined in:

<input id="total" type="text" name="total[]" readonly/>

Having a id="total" is created as property in the HTMLFormElement of name "form". He tries to execute it and fails because it is not a function.

You must avoid creating so many ids because they begin to fill the namespace, they must also be unique throughout the document.

2. When adding elements dynamically, it does not calculate the total

When adding HTML elements as text strings in javascript, you must take care of the use of single and double quotes, in the line where you add the inputs, the quotes are not well placed, the code becomes unmanageable when it is a lot of content:

$('.inputs').append('<div id="ejemplarr'+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." onChange="total('ejemplarr')" 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." onChange="total('ejemplarr')" 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>');

The content that you pass to append('') is with single quotes, but within that huge line of text you have onChange="total('ejemplarr')" where you again use single quotes without escaping with backslash \ , plus you are not using the variable inputs if you used in div .