Añado una respuesta funcional, con Vainilla JSVainilla JS (sin librerías, ni otras historias) y el código PHP necesario para construir dinámicamente el formularioPHP para construir dinámicamente el formulario.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario dinámico</title>
</head>
<body>
<form method="POST" action="procesar.php" name="fm">
<?php
$n_rows = 5;
//Imprime rows
for ( $i = 1; $i <= $n_rows; $i++ ) {
?>
<div style="display: block; margin: 1% 0">
<input type="text"
id="row<?php echo $i; ?>_input1"
name="a[]"
onChange="multiplicar(<?php echo $i; ?> )">
<input type="text"
class="form-control"
id="row<?php echo $i; ?>_input2"
name="b[]"
onChange="multiplicar(<?php echo $i; ?> )">
<input type="text"
class="form-control"
id="row<?php echo $i; ?>_output"
name="resultado[]">
</div>
<?php
} //end for
?>
<input type="button" value="Enviar" onclick="send()">
</form>
<script type="text/javascript">
function $( id ) {
console.log( "$() -> ID: " + id );
return document.getElementById( id );
}
function multiplicar( row ) {
console.log( "multiplicar()" );
//console.log( document.readyState );
var str_input = "row" + row + "_input",
str_output = "row" + row + "_output",
temp,
valor1,
valor2;
/**
* Opción 1 - Los inputs vacios toman un valor de 1 para
* los cálculos
*
*/
//Assigns values
temp/*temp = $( str_input + 1 ).value;
valor1 = ( temp ) ? temp : 1;
temp = $( str_input + 2 ).value;
valor2 = ( temp ) ? temp : 1;
//Sets results
$( str_output ).value = valor1 * valor2;
/**
* Opción 2 - Los resultados solo se muestran cuando se
* rellenaron los dos campos de entrada
*
*/
//Assigns values
valor1 = $( str_input + 1 ).value;
valor2 = $( str_input + 2 ).value;
//Sets results
if ( valor1 && valor2 )
$( str_output ).value = valor1 * valor2;
}
function send() {
console.log( "send()" );
document.fm.submit();
}
</script>
</body>
</html>
Nota: dejo dos variaciones en el código JS para rellenar los imputs de resultados, se pueden comentar/descomentar alternativamente para probarlas.