JavaScript - Reducir Codigo

 
Vista:
sin imagen de perfil

Reducir Codigo

Publicado por ARMANDO (1 intervención) el 17/04/2017 18:54:11
Buen dia:

Estoy realizando un portal para enviar un formulario por correo electronico.

Este formulario tiene una tabla en la que se inserta: Cantidad, Unidad, Nombre, Precio, Subtotal y al final suma todos los subtotales para crear un Total.

Encontre como hacerlo por javascript, considero que debe haber una forma mas eficiente ya que de momento estoy haciendo 15 filas, y por lo tanto hago varias llamadas y operaciones por cada fila.

Hay alguna forma de reducir esto para que pese menos mi archivo final?

Pongo un ejemplo del codigo que estoy ocupando tanto para la tabla como en el <head> y el envio por correo, gracias de antemano!

PS. asi como esta, funciona y manda la tabla al correo que configuramos, pero, me encuentro con problema si quiero agregar mas filas conforme se vayan necesitando.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    function multiplicar(){
      a1 = document.getElementById("multiplicando1").value;
      b1 = document.getElementById("multiplicador1").value;
      c1 = a1*b1;
      document.getElementById("resultado1").value = c1;
 
      a2 = document.getElementById("multiplicando2").value;
      b2 = document.getElementById("multiplicador2").value;
      c2 = a2*b2;
      document.getElementById("resultado2").value = c2;
 
      a3...
      ...
      a15 = document.getElementById("multiplicando15").value;
      b15 = document.getElementById("multiplicador15").value;
      c15 = a15*b15;
      document.getElementById("resultado15").value = c15;
 
      t1 = c1+c2+c3+c4+c5+c6+c7+c8+c9+c10+c11+c12+c13+c14+c15
      document.getElementById("total").value = t1;
 
    }
</script>

tabla:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="box-body">
 
     <form class="form-inline" id="multiplicar" action="enviar.php" method="POST">
 
           <table class="table" >
            <thead>
              <tr>
                <td>Cliente</td>
                <td><input style="border:none; text-transform:uppercase;" type="text" name="cliente"  onkeyup="javascript:this.value=this.value.toUpperCase();"></td>
              </tr>
            <tr>
              <th width="5%">Cantidad</th>
              <th width="5%">Unidad</th>
              <th width="70%">Nombre</th>
              <th width="10%">Precio</th>
              <th width="10%">Subtotal</th>
            </tr>
            </thead>
          <tbody>
            <tr class="odd">
              <td id="1"><input style="border:none" type="text" name="mult1a" id="multiplicando1" value=0 onChange="multiplicar();"></td>
              <td>
                <select class="form-control" id="unidad1" name="mult1e[]" >
                <option value="kg">KG</option>
                <option value="pza">PZA</option>
                <option value="mjo">MJO</option>
                </select></td>
              <td><input style="border:none; text-transform:uppercase;" type="text" name="mult1b" id="nombre1" onkeyup="javascript:this.value=this.value.toUpperCase();"></td>
              <td><input style="border:none" type="text" name="mult1c" id="multiplicador1" value=0 onChange="multiplicar();"></td>
              <td><input style="border:none" type="text" name="mult1d" id="resultado1"></td>
            </tr>
            <tr class="odd">
              <td id="2"><input style...
 
 
            ...<tr class="fila-base">
              <td id="15"><input style="border:none" type="text" name="mult15a" id="multiplicando15" value=0 onChange="multiplicar();"></td>
              <td>
                <select class="form-control" id="unidad15" name="mult15e[]">
                <option>KG</option>
                <option>PZA</option>
                <option>MJO</option>
                </select></td>
              <td><input style="border:none; text-transform:uppercase;" type="text" name="mult15b" id="nombre15" onkeyup="javascript:this.value=this.value.toUpperCase();"></td>
              <td><input style="border:none" type="text" name="mult15c" id="multiplicador15" value=0 onChange="multiplicar();"></td>
              <td><input style="border:none" type="text" name="mult15d" id="resultado15"></td>
            </tr>
 
            <tr class="odd">
              <td></td>
              <td></td>
              <td>Total</td>
              <td><input type="text" name="total" id="total"></td>
            </tr>
 
          </tbody>
       </table>
 
      <input type="submit" value="Enviar datos!" >
 
    </form>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder