Formulario html php ajax

naked · #1 (**permalink**) 01/06/2010, 18:37

Buenas.

Tengo un pequeño formulario con dos campos de texto.

Código HTML:

<html>
<head>
<title>Calculadora</title>
<head>
    <body>						
	 <form action="calculadora.php" method=post>
		<table width="774" border=0>
        
                     <tr>
    	              <td><input type="text" name="km_calor" size=6 maxlength=6></td>
    	              <td><input type="text" name="peso_calor" size=6 maxlength=6></td>
                      </tr>
  
                      <tr>
                      <td colspan=2 align=center><input name="submit" type=submit value="Calcular"></td>
                      </tr>
    	
                  </table>
           </form>
    </body>
</html>

Los datos del formulario los llamo desde php para hacer una cuenta matemática.

Código HTML:

<html>
<head>
<title>Calculadora</title>
<head>
	<body>
											
		<?php
		$km_calor=0.00; 
		$peso_calor=0.00;
		$total_calorias=0.00;				
		define("FACTOREJECUCION", 1036);		
											
		$km_calor=$_POST['km_calor']; 
		$peso_calor=$_POST['peso_calor']; 				
		echo $km_calor. " km recorridos<br />";
														
		$total_calorias= $km_calor * $peso_calor * FACTOREJECUCION;				
		echo "Corriendo". $km_calor. " km has consumido". $total_calorias. " calorías.";
				
		?>
				
				
	</body>
</html>

¿Como podría hacer para que me cargue el resultado justo debajo del formulario sin que recargue la página?.

No tengo nociones de Javascript, pero agradecería un ejemplo o manual sencillo, que yo mismo fuera capaz de realizarlo y medio entenderlo.
Un saludo.

kokoou · #2 (**permalink**) 02/06/2010, 23:33

$.ajax()

naked · #3 (**permalink**) 06/06/2010, 19:14

Cita:

Iniciado por kokoou

[URL="http://api.jquery.com/jQuery.ajax/"]$.ajax()[/URL]

Gracias, pero con solo eso me pierdo.

No digo que me paseis un ejemplo con el código que he puesto y ya hecho.

Agradecería alguna pista de por donde debo comenzar, un manual en el que se explique un ejemplo parecido, no se algo así.

Un saludo.

Jokuto · #4 (**permalink**) 08/06/2010, 04:22

Efectivamente con ajax, en el diseño de la pagina pon debajo del formulario un <span id="span_1"> vacio, y despues con el ajax haces window.document.getElementById('span_1').innerHTML =responsetext, con lo que al realizaar la peticion te aparecera el resultado dentro del span y finikitado

naked · #5 (**permalink**) 19/06/2010, 11:21

Bueno con vuestra ayuda he conseguido que funcione, pero cuando lo integro en la web deja de funcionar:

calculadora.php(todo este archivo es php, es más largo pero pegue esto, ¿podría no funcionar porque habría que definir la variable del resultado en js y pasarla a PHP?.)

Código PHP:

  <html>
    <head>        
                
        <script src="http://www.google.com/jsapi"></script>
        <script>google.load("jquery", "1");</script>    
            
        <script type='text/javascript'>
            
        $(document).ready(function () 
        {                        
            $('#calcular').click(function() 
            { 
                procesar();
            });
        });
        
        function procesar()
        {
            $.ajax ({                
                url:                 'calcular-calorias.php',                                
                type:               'post',                                            
                data:             $('#formulario').serialize(),        

                success:     function(request, settings)    {                    
                    $('#resultado').html(request);    }                                
                   });
        }        
        
        </script>

    </head>

    <body>
                        
            <form id='formulario' action='#' method='post'>
                
                <input type='text' id='km_calor' name='km_calor' value='' size='4' maxlength='4' />                        
                <input type='text' id='peso_calor' name='peso_calor' value='' size='4' maxlength='4' />                
                <input type='button' id='calcular' value='Calcular' />
                                
                <span id='resultado'>&nbsp;</span>
                
            </form>
        
    </body>
</html>

calcular-calorias.php

Código PHP:

  <?php

header('Pragma: no-cache');  

       $km_calor=0.00; 
       $peso_calor=0.00;
       $resultado = 0.00;
    
     $km_calor = $_POST['km_calor'];
     $peso_calor = $_POST['peso_calor'];
         define("FACTOREJECUCION", 1036);    
    
    if(($km_calor + $peso_calor) > 1){
        $resultado = $km_calor * $peso_calor * FACTOREJECUCION;        
    }    
    else {
        echo "No ha introducido correctamente las cantidades";
    }
    
echo number_format($resultado, 0);

?>

Estos dos archivos por si solos funcionan perfectamente y el resultado de la operación la muestra bajo el formulario como me habeis recomendado. El tema es que necesito integrarlo en una web con esta estructura:

header.php
index.php
sidebar.php.
footer.php

El formulario lo he metido en "index.php"(es un archivo en php, (¿debería pasar la variable a php?), he subido al servidor el archivo "calcular-calorias.php", y los "scripts" los he metido en header, pero no funciona. Llevo días dándole vueltas pero no doy con la solución. ¿Donde me estoy equivocando?.

Un saludo.