[SOLUCIONADO] Hacer calculos de los input recibidos

[marianomartelli]

Hola a todos,

Necesito hacer un calculo con los datos recibidos del input antes de enviar a la otra pagina.
Necesito que calcule los metros cubicos osea largo x ancho x altura de los datos recibidos por input y me los muestre en la parte que indico después de aceptar el alto.
No se javascript a ver si alguien me puede ayudar.





dejo aqui el programa
Código PHP:

Código PHP:

<form method="POST" action="calctransnacional.php"/>
             <table>
                 <tr>
                   <td>
                       * Medidas en mm Largo:
                   </td>
                   <td>
                        <input type="text" name="largo" size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10"/>
                       
                   </td>      
                </tr>
               
               <tr>
                   <td>
                       * Medidas en mm Ancho:
                   </td>
                   <td>
                        <input type="text" name="ancho" size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10"/>
                       
                   </td>      
                </tr>
               
                <tr>
                   <td>
                       * Medidas en mm Alto:
                   </td>
                   <td>
                        <input type="text" name="alto" size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10"/>
                       
                   </td>      
                </tr>
               
                <tr>
                   <td>
                       * M3 x 270 kg:
                   </td>
                   <td>
                   
                      Aqui es donde necesito que haga los calculos y me los muestre
     
                   </td>      
                </tr>
               
                 <tr>
                   <td>
                       * Peso:
                   </td>
                   <td>
                        <input type="text" name="peso" size="10" title="Ingrese el valor del peso que sea mayor (el calculado m3 o el peso bruto) con decimales con punto -> ejemplo: 12.10"/>
                   </td>      
                </tr>
               
                 <tr>
                   <td>
                       * Zona:
                   </td>
                   <td>
                        <input type="text" name="zona" size="10" />
                   </td>      
                </tr>
               
                <tr>
                   <td>
                       * Descripcion:
                   </td>
                   <td>
                        <input type="text" name="descripcion" size="30" />
                   </td>      
                </tr>
               
           
           
             
             
              <tr>
                 <td><br><br>
                   <input type="submit" name="submit" class="button" value="Ingresar" />
                   <input type="reset"  class="button"/>
                   <a href="articulos.php" class="button">Volver</a>
                 </td>
              </tr>
           </table>
 

Ver original

[miktrv]

Hombre... que te lo hagamos todo... esto es para aprender..

coloca un id a cada elemento
puedes trabajar con los elementos por el id previamente colocado

document.getElementById("Id")

Con eso tienes medio problema resuelto.

Te falta usar el evento de envío en el formulario y pararlo para procesar lo que necesitas.

[marianomartelli]

Hola,

Gracias por responder, he probado a hacer lo siguiente pero como he dicho antes nunca he hecho nada con javascript es por eso que pido ayuda.

No se si lo he hecho bien ahora necesito que lo muestre.

Código PHP:

<tr> 
               <td>
                   * Medidas en mm Largo:
               </td>
               <td>
                    <input type= text id="largo" size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10" />
                    <script>
                    document.getElementById("largo")
                    </script>
               </td>        
            </tr>
            
           <tr> 
               <td>
                   * Medidas en mm Ancho:
               </td>
               <td>
                    <input type="text" id="ancho" size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10" />
                    <script>
                    document.getElementById("ancho")
                    </script>
                    
               </td>        
            </tr>
           
            <tr> 
               <td>
                   * Medidas en mm Alto:
               </td>
               <td>
                     <input type="text" id="alto"  size="10" title="Ingrese el valor con decimales con punto -> ejemplo: 12.10" />
                     <script>
                     document.getElementById("alto")
                     </script>
                    
               </td>        
            </tr>
           
            <tr> 
               <td>
                
                   * M3 x 270 kg:
                   
                   <SCRIPT>
                        function calcular(){...}
                        function calculo(largo,ancho,alto,inputtext){
    
                        // Calculo del subtotal
                        subtotal = largo*ancho*alto;
                        inputtext.value=subtotal;
                        
                            
                    }
                   </SCRIPT>
                   
                   
               </td>
               <td>
 

Gracias y saludos

[Alexis88]

Lo único que tienes que haces es asignarle un Id a cada caja de texto y cuando realices el envío de datos del formulario, cancelas la acción del evento submit, realizas el cálculo, lo muestras y luego de unos segundos, envías los datos del formulario para su procesamiento.

Código HTML:

<form id = "miFormulario" action = "proceso.php" method = "post">
    Largo: <input type = "text" name = "largo" id = "largo" />
    Ancho: <input type = "text" name = "ancho" id = "ancho" />
    Altura: <input type = "text" name = "altura" id = "altura" />
    Metros cúbicos: <input type = "text" name = "calculo" id = "calculo" readOnly />
 
    <input type = "submit" value = "Calcular y Enviar" />
</form>
 

Código Javascript:

var formulario = document.getElementById("miFormulario");
 
formulario.addEventListener("submit", function(event){
    var largo = Number(document.getElementById("largo").value),
        ancho = Number(document.getElementById("ancho").value),
        altura = Number(document.getElementById("altura").value),
        metrosCubicos = document.getElementById("calculo");
    event.preventDefault();
    metrosCubicos.value = largo * ancho * altura;
    setTimeout(function(){
        formulario.submit();
    }, 3000);
}, false);
 

En el documento HTML, tengo un formulario, el cual contiene 3 cajas de texto en donde ingresaré los valores a procesar, además de una cuarta caja que es en donde se mostrará el resultado de dicho cálculo y un botón para enviar los datos del formulario hacia el archivo "proceso.php" que es el que indico en el atributo action del formulario.

En el código JS, tomo al formulario por su Id, luego, con el método addEventListener, le añado el evento submit como evento escuchador, el cual al producirse, ejecutará una función. En dicha función, tomo los valores de las 3 cajas de texto del formulario, los cuales son convertidos a tipo numérico con la función Number(), ya que se considera como una cadena de caracteres a todo valor contenido en una caja de texto, por lo que no podría realizar operaciones matemáticas; además, tomo a la caja en donde se mostrará el resultado, evito que se produzca el comportamiento natural del evento submit que es el de enviar los valores del formulario hacia un archivo de destino en el que se les procesará, para lo cual hago uso del método preventDefault. Luego de esto, realizo la multiplicación de los valores ingresados y los asigno a la caja de texto en donde quiero que se muestre el resultado.

Finalmente, con el método setTimeout, ejecuto una función transcurridos 3000 milisegundos o 3 segundos. En dicha función, enviaré los datos del formulario hacia el archivo "proceso.php" que es el que se indicó en su atributo action, para lo cual hago uso del método submit().

Saludos