[SOLUCIONADO] Enviar el valor de un select por AJAX (con jQuery)

altrisi · #1 (**permalink**) 05/06/2016, 13:25

Hola tengo una especie de calculadora que funciona por AJAX, y por ahora sólo hace sumas. Las otras operaciones las tengo configuradas en el PHP, pero no se me envía el valor de un select, en el que se puede seleccionar la operación. Cómo la suma es el último else del PHP, es lo único que procesa. ¿Hay alguna manera de hacerlo? Aquí dejo parte de mi código PHP y HTML:

Código de la página HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Calculadora sencilla de AJAX</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script>
function realizaProceso(valorCaja1, valorCaja2, operacion){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2,
                "operacion" : operacion
        };
        $.ajax({
                data:  parametros,
                url:   'suma.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>
    </head>
    <body>
        <form action="suma.php" method="post">
            Introduce valor 1
            <input type="number" name="valorCaja1" id="valor1" value="0" /><br />
            Elige la operación:
            <select id="operacion" name="operacion">
                <option value="suma">+</option>
                <option value="resta">-</option>
            </select><br />
            Introduce valor 2
            <input type="number" name="valorCaja2" id="valor2" value="0" /><br />
            <input type="submit" onclick="realizaProceso($('#valor1').val(), $('#valor2').val(), $('#operacion').val());return false;" value="Calcular"/>
        </form>
        Resultado: <span id="resultado"></span>
    </body>
</html>

Extracto del Código del archivo PHP que lo procesa (suma.php) (sólo aparecen las dos primeras operaciones ya que con dos que sepa ya podré hacer las demás):

Código PHP:

Ver original<?php 
 $operacion = $_POST['operacion']
 
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; 
 
$resultadoresta = $_POST['valorCaja1'] - $_POST['valorCaja2']; 
 
if ($operacion == 'resta') {
    echo $resultadoresta;
} else {
    echo $resultado;
} 
?>

kip13 · #2 (**permalink**) 05/06/2016, 13:45

Hola. prueba asi:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Calculadora sencilla de AJAX</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        function realizaProceso(valorCaja1, valorCaja2, operacion){
            var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2,
                "operacion" : operacion
            };
            $.ajax({
                data:  parametros,
                url:   'suma.php',
                type:  'post',
                beforeSend: function () {
                    $("#resultado").html("Procesando...");
                },
                success:  function (response) {
                    $("#resultado").html(response);
                }
            });
        };
    </script>
</head>
<body>
 
    Introduce valor 1
    <input type="number" name="valorCaja1" id="valor1" value="0" /><br />
    Elige la operación:
    <select id="operacion" name="operacion">
        <option value="suma">+</option>
        <option value="resta">-</option>
    </select><br />
    Introduce valor 2
    <input type="number" name="valorCaja2" id="valor2" value="0" /><br />
    <input type="button" onclick="realizaProceso($('#valor1').val(), $('#valor2').val(), $('#operacion').val());return false;" value="Calcular"/>
 
Resultado: <span id="resultado"></span>
</body>
</html>

Código PHP:

Ver original<?php
$operacion = $_POST['operacion'];
 
if ($operacion == 'resta') {
   $resultadoresta = $_POST['valorCaja1'] - $_POST['valorCaja2'];
    echo $resultadoresta;
} else {
    $resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];
    echo $resultado;
}
?>

O en luga de if y else podrias usar switch:

Código PHP:

Ver original<?php 
    $operacion = $_POST['operacion'];
 
    switch ($operacion){
           case "resta" : echo $_POST['valorCaja1'] - $_POST['valorCaja2']; break;
           case "suma" : echo $_POST['valorCaja1'] + $_POST['valorCaja2']; break;
    } 
?>

Saludos

altrisi · #3 (**permalink**) 10/06/2016, 11:46

¡Muchas gracias!
Cambie el código por el "case", al principio se generó un error en el servidor y se borró el contenido del archivo, pero al reescribirlo funcionó correctamente. Gracias.