Nuevamente agradecido, ya bastante mas cerca de la solución creo:
Aquí copio código del php que esta en la pagina "resultado.php" y código de la index.html donde está el formulario que lo llama:
Página php de nombre "resultado.php, con el procesador del formulario:
<?php// Hacemos los cálculos// El operador * sirve para multiplicar.$roble= $pies * 300 / 1000; // 300 seria el número de pies para roble$pino= $pies * 100 / 1000; // 100 seria el número de pies para pino $cedro= $pies * 100 / 1000; // 100 seria el número de pies para cedro// Mostramos los resultadosecho "<br>";echo "<h2>Necesitaremos lo siguiente:</h2>";echo "<br>";echo ''.$roble. ' pies de roble, ';echo "<br>";echo ''.$pino.' pies de pino,';echo "<br>";echo ''.$cedro.' pies de cedro,';echo "<br>";?>
Página index.html con el formulario
<form name='pies' method="get" action="resultado.php" accept-charset="utf-8">
<div class="field name-box">
<input class="input" type="number" name="pies" id="pies" placeholder="Son...?" required maxlength="20" size="50"/>
<label for="number">Cantidad</label>
</div>
<br>
<br><div>
<input class='input' type='submit' value='Enter'>
</div>
</form>
Modifiqué alguna cosa de tu ejercicios para usar con ajax te pego el código para guiarte.
Este es el index.php
Yo le llamo php puede ser html pero es mejor php. En este va a estar el formulario y el codigo javascript al final como uso jquery le agrego el enlace.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id = "formResultado">
<div class = "field name-box">
<input class = "input" type = "number" name = "pies" id = "pies" placeholder = "Son...?" required maxlength = "20" size = "50"/>
<label for = "number">Cantidad</label>
</div>
<br>
<br><div>
<input id = "botonEnviar" type = 'button' value = 'Enter'>
</div>
</form>
<div id = "resultado">
</div>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
$("#botonEnviar").on('click', function () {
mostrarResultdo();
});
</script>
</body>
</html>
Codigo php rultado.php
En este va a estar el codigo php que va a hacer los calculos.
<?php// Hacemos los cálculos// El operador * sirve para multiplicar.$pies=$_POST['pies'];$roble= $pies * 300 / 1000; // 300 seria el número de pies para roble$pino= $pies * 100 / 1000; // 100 seria el número de pies para pino $cedro= $pies * 100 / 1000; // 100 seria el número de pies para cedro$datos ='<br>';$datos.='<h2>';$datos.='Necesitaremos lo siguiente:';$datos.='</h2>';$datos.='<br>';$datos.=''.$roble. ' pies de roble, ';$datos.='<br>';$datos.=''.$pino.' pies de pino,';$datos.='<br>';$datos.=''.$cedro.' pies de cedro,';$datos.='<br>';$arr = ["datos" => $datos];echo json_encode($arr);
La función código javascrit
En este va a ir el ajax. El ajax se utiliza para que no se recargue la pagina cada vez que haga un procedimiento.
function mostrarResultdo() {
var datos_formulario = $("#formResultado").serialize();
console.log("datos_formulario--> "+datos_formulario);
$.ajax({
type: 'POST',
url: 'php/resultado.php',
data: datos_formulario,
dataType: 'json',
beforeSend: function (objeto) {
},
success: function (json) {
$("#resultado").html(json.datos);
},
error: function (e) {
},
complete: function (objeto, exito, error) {
}
});
}
Y cada uno se va en una carpeta diferente.
Cualquier consulta y duda a la orden para eso estamos en el foro para ayudarnos.