Tengo un código con el que calculo talla de zapatos en diferentes países, hasta ahí todo bien.
Sucede que cada que el usuario busca su talla la pagina se actualiza. Estoy usando Ajax
y Jquery
para evitar esto, pero no se si mi código esta escrito de la forma correcta pues no funciona.
¿Podrían darme una mano?
Muchas gracias desde ya.
Acá mi código:
(Formulario para ingresar la talla)
<form class="form-inline" method="post" action="javascript:calcular()" enctype="multipart/form-data" id="nuevo"><select class="form-control" name="from" id="from"><option value="undefined">Medida inicial</option><option value="Col" id="Col">Col</option><option value="Us" id="US">US</option><option value="EU" id="EU">EU</option><option value="UK" id="UK">UK</option><option value="Cm" id="Cm">Cm</option></select>
<div
class="form-group"><input class="form-control" type="text" name="talla_recibida" id="talla_recibida" placeholder="Insertar talla"></div>
<div class="form-group"><button class="btn btn-primary" type="submit">Convertir </button></div>
<p></p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Col</th>
<th>US</th>
<th>UK</th>
<th>EU</th>
<th>Cm</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php include 'calcular.php'; echo $talla_col ?></td>
<td><?php include 'calcular.php'; echo $talla_us ?></td>
<td><?php include 'calcular.php'; echo $talla_uk ?></td>
<td><?php include 'calcular.php'; echo $talla_eu ?></td>
<td><?php include 'calcular.php'; echo $talla_cm ?></td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</form>
(script de la función ajax
)
<script>
function calcular() /* La funcion envia los datos del formulario
al php "calcular.php" */
{
var from = document.getElementById("from").value
var talla_recibida = document.getElementById("talla_recibida").value
var url = "calcular.php";
$.ajax({
method: "post",
url: url,
data:{ from: from, talla_recibida: talla_recibida},
})
}
</script>
(calcular.php
- Los códigos que convierten la talla están incluidos y las variables $talla_col
, $talla_US
, etc. Vienen de ahí)
<?php
$from = $_POST['from'];
$talla_recibida = $_POST['talla_recibida'];
include 'from_us.php';
include 'from_eu.php';
include 'from_uk.php';
include 'from_col.php';
include 'from_cm.php';
echo $talla_col;
echo $talla_us;
echo $talla_uk;
echo $talla_eu;
echo $talla_cm;
?>
AJAX
pero no estás haciendo nada cuando recibes la respuesta. Debes añadir uncallback
y realizar alguna acción (dependiendo de lo que quieras hacer) cuando recibas los datos.