Hacer calculos de los input recibidos

[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