como procesar los datos de un formulario sin recargar pagina

[pithon]

Hola no se muy bien la logica que debo seguir para realizar mi codigo, os comento en que consiste, trata de un formulario metido dentro de un div contenedor donde una vez rellenado el formulario quiero procesarlo para guardar los datos en una base de datos , bien normalmente en el formulario en el atributo action='' ponia la direcion donde quiero que se procese los datos, pero si quiero que se procese los datos en el mismo script mediante ajax para no recargar toda la pagina solo se recarge el contenido donde estaba el formulario osea en el div contenedor, como tendria que hacerlo, pongo un ejemplo:

Código HTML:

<div id='contenedor'>
<form method='post' action='procesar.php'>
<label>nombre</label><input type='text' name='nombre'>
<label>edad</label><input type='text' name='edad'>
<input type='submit' value='enviar'>
</form>
</div>
 

procesar.php

Código PHP:

<?php
//aqui todo el codigo para procesar los datos
?>
 

bien entonces como haria para procesar los datos en el mismo script dentro del contenedor, mediante ajax, alguna ayuda, saludos.

[pithon]

bueno deciros que la manera que se me ocurrio a mi de hacerlo era esta:

osea creo una funcion ajax donde llamo a un script php donde procesare los datos, a esta funcion js le pasaria los parametros de los valores de los campos, pero claro en este caso seria solo dos valores, pero si estamos tratando con un formulario que tiene muchos campos no creo que sea la forma correcta de hacerlo, mi idea era un funcion algo asin:

Código Javascript:

function procesarDatos(nombre,edad) {
   var Ajax=http();
   Ajax.open("get","procesar.php?nombre=" + nombre + "&edad=" + edad, true);
   Ajax.onreadystatechange = function() {
      if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501)){
               document.getElementById('contenedor').innerHTML=Ajax.responseText;
      }
   }
Ajax.send(null);
}
 
/*creandole en el boton de envio un bottom y llamando asin a la funcion:*/
 
onclick='procesarDatos(form.nombre.value,form.edad.value)';
 

aparte tampoco sabria como hacerlo si cuando el formulario contiene un campo tipo archivo,

Saludos.

[IsaBelM]

varios errores de concepto

<form name="consulta" action="precesa.php" method="post" onsubmit="procesarDatos(this); return false">
....
<input type="submit" value="Submit" name="Submit">

var url = 'precesa.php?nombre='+val[0].value+'&edad='+val[1].value;
ajax.open("get", url, true);

fíjate que val es una colección y por lo tanto puedes recorrerla

[rossijona]

Aquí te dejo un ejemplo muy sencillo usando jquery y la función load() RECOMENDABLE por lo sencilla que es.

http://glamoureventos.site90.net/html/

y te puedes descargar el archivo desde aquí:

http://glamoureventos.site90.net/html/html.rar

Me comentas como te fue.

[pithon]

IsaBelM gracias por tu explicacion ahora lo tengo mas claro, pero aún no se como se tendria que hacer si hay un campo type='file'.

rossijona, gracias por los enlaces, me los mirare y te comentare que tal me fue.

saludos.

[IsaBelM]

si tu pretensión es subir una imagen, no estás bien encimando. necesitas un lenguaje del servidor

[pithon]

IsaBelM mi intencion es guardar estos datos en una base de datos, claro que necesito un lenguaje del lado del servidor, pero quiero procesarlo en el mismo script donde tengo el formulario, osea dentro del contenido div, yo en la funcion procesarDatos(), llamo a un script llamado procesardatos.php que es aqui donde guardo las datos del formulario en una base de datos, recojiendo los valores del formulario como me comentastes que habia que hacerlo, creo que me explique mal, espero que ahora se me entienda mejor, un saludo.

[pithon]

Iniciado por rossijona

Aquí te dejo un ejemplo muy sencillo usando jquery y la función load() RECOMENDABLE por lo sencilla que es.

http://glamoureventos.site90.net/html/

y te puedes descargar el archivo desde aquí:

http://glamoureventos.site90.net/html/html.rar

Me comentas como te fue.

Gracias por el enlace, pero justo eso no es el problema que tengo, yo tengo un div contenedor con un formulario, y quiero procesar en este mismo div contenedor los datos o procesar o verificar los datos y por supuesto desde un lenguaje del lado del servidor en este caso usaria php, no se si os estoy liando mas si no entendeis mis dudas decirmelo y mostrare un ejemplo, un saludo.

[IsaBelM]

lo que me queda claro es que no quieres subir una imagen, sino guardar su ruta. por lo tanto, si has seguido las indicaciones que te dí, no veo donde está el problema.

al hacer un insert, te recomendaría que tratases los controles como array. siempre y cuando los controles estén en el mismo orden que los campos de tu tabla

[pithon]

hola IsaBelM, gracias por tu aclaracion, pero entonces no me queda claro como seria la manera correcta de guardar la imagen en el servidor, donde tengo que poner el codigo o donde invocarlo? realmente la funcion que me explicastes arriba la utilizaria para pasar los datos del formulario al script php que procesa y asin el resultado de este procesamiento mostrarlo en la misma pagina que estaba el resultado, no se si la logica que le estoy empreando al codigo es la correcta, cualquier sugerencia bienvenida sea, saludos.

[IsaBelM]

me confundes. ahora dices que sí quieres subir una imagen al servidor. así que primero vamos a ello
http://www.forosdelweb.com/f18/subir...rvidor-788905/
http://www.php.net/manual/en/features.file-upload.php

[pithon]

Hola IsaBelM, la imagen me queda claro como hay que guardarla en el servidor pero no tengo muy claro como hago esto de manera asincronica, e incluso mostrandola redimensionada en el mismo script, no se si sabes de algun manual donde te explique bien esto, partiendo de esto lo demas ya lo tengo claro para procesar los datos del formulario e incluso los nombres de las imagenes, pero me queda eso guardarla en el servidor una vez la seleciono.

saludos.

[IsaBelM]

de acuerdo, lee este tema http://www.forosdelweb.com/f13/como-...iframe-957878/

[pithon]

Hola IsaBelM, bueno ahora entiendo a que te referias con que necesitaba un lenguaje del lado del servidor, para subir la imagen e incluso manipularla solo se puede hacer del lado del servidor, y si no quiero recargar la pagina es usando un iframe oculto, hasta ahi se como se hace pero me faltaria la parte del js, por ejemplo si tengo la imagen guardada en el servidor como la injecto en el html e incluso ponerle una barra de carga... gracias por tu ayuda.

Saludos

[IsaBelM]

la verdad es que estoy algo perdida, pero es mi culpa.

si ya tienes la imagen en el servidor, la insertas como cualquier otra imagen. con respecto a la barra de carga, hace poco hice esto. no es exactamente una barra de carga

[pithon]

IsaBelM el perdido soy yo y te estoy liando, bueno mi duda es que la imagen la quiero mostrar de forma asincronica una vez seleciona el usuario la imagen, pero aparte tiene que tener opcion a subir mas de una imagen, esto no se hacerlo sabes de algun tutorial que hable de esto, gracias de todas formas por toda tu ayuda, un saludo.

[pithon]

Bueno hice algo muy basico como simplemente mostrar la imagen llamandola con js e insertandola en un div, algo asin:

Código HTML:

<form method="post" name='archivo' enctype="multipart/form-data" target="iframe" action="procesar.php" >
<input id='imagen' type="file" name='imagen' onchange="this.archivo.submit();mostrarImagen(document.getElementById('imagen').value)" />
</form>
 
<iframe name="iframe" style="display: none" ></iframe>
<div id='mostrar_imagen'></div>
 

en el php simplemente subi la imagen y la reduci, esta es la funcion que use para insertar la imagen en el div :

Código Javascript:

function mostrarImagen(nombre) {
   var Ajax=objetoAjax();
   Ajax.open("get","procesar.php?nombre="+nombre);
   Ajax.onreadystatechange = function() {
        if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501)){
             document.getElementById('mostrar_imagen').innerHTML=Ajax.responseText;
        }
     }
Ajax.send(null);
}
 

despues en procesar.php hice algo asin:

Código PHP:

<?php
if($_GET['nombre']){
echo "<img src='img_reducidas/".$_GET['nombre']."'>";
}  
?>
 

necesitaria ayuda para mejorar el codigo, por ejemplo ponerle un enlace para dar la posibilidad de borrar la imagen al usuario y poder hacerlo con dos o tres campos de archivo, no consigo encontrar la manera alguna ayuda...

saludos.