Mandar formulario simple

fedefrankk · #1 (**permalink**) 17/12/2011, 12:24

Buenas a todos, quiero meterme de lleno en Ajax, ya se algo de javascrip, php y html, css,.

Lo que quiero hacer es un formulario para guardar datos en mysql con ajax, lo hago mediante php y con el metodo GET o POST envio las variables, las agarro y hago todo el procedimieto con php, tengo entendido que con Ajax no recarga pagina, estuve mirando ejemplos pero no entiendo nada.. me gustaria saber si alguien tiene algo hecho o alguna pagina que conozca asi empieso en este tema que es expectacular.

Muchas gracias a todos
Salusos y Felices Fiestas
fede

Snoopy1413 · #2 (**permalink**) 17/12/2011, 14:33

comensemos con algo bien sensillito .... Ummm por ejemplo validaciones aunq lo suyo seria aserlo desde el servidor pero como practicando xD...

Código PHP:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script> <!-- Jquery -->
    <script type="text/javascript">

 /* ============================================= */
 $(function() {
     
  $('#nuevo').click(function() { //> CLICK AL BOTON CON ID [nuevo]

    var campo1 = $('#idioma1').val(); //> VARIABLES A ENVIAR [Esto es como hacer un document.getElementById('nombre del ID')]
    var campo2 = $('#idioma2').val();
    var campo3 = $('#tipo').val();
           
        //> PROCESAR DATOS
    
    if ( campo1 == "" ){ //> COMPARACION SIMPLE SI EL CAMPO ES VACIO
        $('#mensaje').append('<p id="cargando">No deben de haber espacios en blanco</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
        $('#cargando').fadeOut(3500, function(){ // Oculta el mensaje 
              $(this).remove(); // Quita el mensaje 
          });
    }
        else if ( campo1.length > 100 ){ //> COMPARACION SIMPLE SI SON MAS DE 100 CARACTERES
            $('#mensaje').append('<p id="cargando">Los caracteres de Idioma 1 deben de ser menor que 100</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
            $('#cargando').fadeOut(3500, function() { // Oculta el mensaje 
                $(this).remove(); // Quita el mensaje 
            });
        }

        else if ( campo2.length > 100 ){ //> COMPARACION SIMPLE SI SON MAS DE 100 CARACTERES
            $('#mensaje').append('<p id="cargando">Los caracteres de Idioma 2 deben de ser menor que 100</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
            $('#cargando').fadeOut(3500, function() { // Oculta el mensaje 
                $(this).remove(); // Quita el mensaje 
            });
        }
        
    else{
          
         $.ajax ({
                    url: "./listaCPMotivo!nuevoMotcp", //> URL
                    type: 'POST', //> lo puedes cambiar por GET si quieres .....
                    data: 'campo_de_tu_php_1=' + campo1 + '&campo_de_tu_php_2=' + campo2 , //> VARIABLES A ENVIAR
                    success: function(result){ //> Si todo a ido bien lo envia
                        alert("Datos Guardados");
                        //> encaso de querer redirigir despues de enviar datos quita los comentarios de esta dos lineas
                          
                          /*
                          var go = "listaCPMotivo"; 
                           location.href = go;
                          */
                    }
                
          });
          
    }
    return false;
   });
 });
/* ============================================= */
 

</script>

<body>
<h2>EJEMPLO AJAX</h2>
<P>Inserte los nuevos datos:</P>


<div id='mensaje'></div> <!-- AQUI SE MOSTRARAN LOS MENSAJES EN CASO DE HABER ERROR A LA HORA DE ENVIAR LOS DATOS-->

    <form id='formMotcp' namespace="/"  action='TU_PHP'  >
        

    <BR/>     
    CAMPO 1  <input name='idioma1' id='idioma1' />
    <BR/>        
    CAMPO 2     <input name='idioma1' id='idioma2' />
     <BR/><BR/>           
    
    <input  type='submit' id='nuevo' value='Guardar Nuevo' title='Guardar Nuevo Registro'/>
         
    
    </form>    

</body>
</html>

Ojala te sirva

fedefrankk · #3 (**permalink**) 18/12/2011, 06:14

Hola Snoopy1413, muchas gracias por contestar. esta muy bueno como validas con Jquery expectacular, a la hora de llenar los campos campo1, campo2,...

tengo este fragmento de Ajax.

Código Javascript:

Ver original$.ajax ({
                    url: "./listaCPMotivo!nuevoMotcp", //> URL
                    type: 'POST', //> lo puedes cambiar por GET si quieres .....
                    data: 'campo_de_tu_php_1=' + campo1 + '&campo_de_tu_php_2=' + campo2 , //> VARIABLES A ENVIAR
                    success: function(result){ //> Si todo a ido bien lo envia
                        alert("Datos Guardados");

como hago para mandar mediante POST, esos valores a un archivo php que los guarde, (alomejor no funciona con mi logica, por eso quiero aprender),

donde dice url, ingeso la pagina donde tengo el INSERT INTO, de php
donde dice data: que campos tengo que ingresar?..

desde ya muchas gracias

MUy amable por tomarte tu tiempo.
Saludos
Federico

Snoopy1413 · #4 (**permalink**) 18/12/2011, 08:15

donde dice URL ingresas la URL de tu PHP o si no la ruta del php en donde esta EN TU DISCO.... xq la otra es que tu cuando ingresas datos y mandas a un php si te fijas en la parte de la url suele ser maso o menos asi
http://miphp.php/'campo_de_tu_php_1=' + campo1 + '&campo_de_tu_php_2=' + campo2

en donde campo1 sera la variable recogida por javascript esto es como hacer:

campo1= document.getElementById('nombre del ID').value;

solo q con ajax es:

campo1 = $('#campo1');

practicamente son lo mismo

donde dice data: pones el ID de los input y los nombres de los campos de tu php

data: 'campo_de_tu_php_1=' + campo1 + '&campo_de_tu_php_2=' + campo2*

en donde campo1 y campo2 seran los datos introducidos del formulario

para mandar como post o get pues te lo pone ahi y te lo deje tmb

TYPE: 'GET' / 'POST'

fedefrankk · #5 (**permalink**) 18/12/2011, 15:31

Hola de nuevo, algo estoy haciendo mal, espero que me tengas paciencia...

este es el fragmento de ajax que me diste:

Código Javascript:

Ver original$.ajax ({
                    url: "INSERT.php", //> URL
                    type: 'POST', //> lo puedes cambiar por GET si quieres .....
                    data: 'cam1=' + campo1 + '&cam2=' + campo2 , //> VARIABLES A ENVIAR
                    success: function(result){ //> Si todo a ido bien lo envia
                        alert("Datos Guardados");
                        //> encaso de querer redirigir despues de enviar datos quita los comentarios de esta dos lineas
                          /*
                          
                          var go = "listaCPMotivo"; 
                           location.href = go;
                          */
                    }

y este es mi insert.php..

Código PHP:

Ver original<?php
$cam1=$_REQUEST['cam1'];
$cam2=$_REQUEST['cam2'];
 
include('config.php');
include('conexion.php');
$conexion = conectar ();
 
mysql_query("insert into listado (
campo1,
campo2)
 
values (
'$cam1',
'$cam2')",
$estoy) or  die("Problemas en el select   ".mysql_error());
 
mysql_close($conexion);
echo "fue dado de alta.<br>";
 
?>

No se donde le estoy herrando,
Gracias nuevamente

saludos.!!
Fede

Snoopy1413 · #6 (**permalink**) 19/12/2011, 13:02

esta bien solo q al final te faltan esto..
});

y si no pues dame mas detalles que error te esta dando al insertar....

fedefrankk · #7 (**permalink**) 19/12/2011, 20:41

Buenas, gracias por contestar, el error era en mi php que estaba mal la conexion, no largaba error, solamente no se conectava.
Realmente es increible, es mucha la diferencia entre lo convencional de php y ajax..

Muchas gracias ahora a seguir aprendiendo... por dode empiezo?.... jajaja

GRacias y gracias por tu tiempo.!!!!

Saludos Fede

PD: cualquier duda que me surga seguro que voy a preguntarte, espero no molestar.

Snoopy1413 · #8 (**permalink**) 20/12/2011, 07:37

por debajo de success pon esto

error: function() {
alert("Error del sevidor");
},

para que sepas cuando falla o no tu php =)

mmmm... puedes comensar investigando aqui http://jquery.com/