Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como pasar variables del formulario con ajax?

 Estas en el tema de Como pasar variables del formulario con ajax? en el foro de Frameworks JS en Foros del Web. Hola, tengo un formulario de registro en mi web con Ajax, normalmente, antes de implementar ajax, ponia <form ....... action="registro2.php"> y cuando apretaba el boton ...
  #1 (permalink)  
Antiguo 22/04/2011, 01:07
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 13 años
Puntos: 0
Pregunta Como pasar variables del formulario con ajax?
Hola, tengo un formulario de registro en mi web con Ajax, normalmente, antes de implementar ajax, ponia <form ....... action="registro2.php"> y cuando apretaba el boton de enviar, los datos del form se pasaban al registro2.php por $_POST donde se almacenaban en la base de datos, pero ahora no puedo y no se como hacer, y creanme que busque tutoriales de como hacerlo y no los entiendo o no son lo que busco, alguien me da una mano??? graciass :D
  #2 (permalink)  
Antiguo 22/04/2011, 11:28
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Como pasar variables del formulario con ajax?
Para realizarlo automáticamente no creo que exista un método, por lo cual toca capturar los datos que vas a enviar, darle formato (nom1=val1&nom2=val2&nom3=val3) y enviarlos por método POST:
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(nom1=val1&nom2=val2&nom3=val3);
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 22/04/2011, 11:46
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 13 años
Puntos: 0
Respuesta: Como pasar variables del formulario con ajax?
Cita:
Iniciado por laratik Ver Mensaje
Para realizarlo automáticamente no creo que exista un método, por lo cual toca capturar los datos que vas a enviar, darle formato (nom1=val1&nom2=val2&nom3=val3) y enviarlos por método POST:
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(nom1=val1&nom2=val2&nom3=val3);
Muchas gracias por tu respuesta, me podrias ayudar a armar el codigo? soy bastante novato en javascript y ajax. Posteo el codigo de mi formulario para que veas los campos que contiene


Código HTML:
 <form method="post" name="regform" action="modulos_carbono/registro2.php">
    <tr>
     <td height="100" colspan="2"><div align="center" class="Estilo15"><span class="style1  Estilo14 Estilo1">Registro</span></div></td>
    </tr> 
    <tr>
     <td colspan="2">&nbsp;</td>
    </tr>  
    <tr>
     <td width="50%"><div align="right" class="normal_text_white  Estilo5">Cuenta</div></td>
     <td width="50%"><div align="left"><strong>
       <input name="cuenta" id="cuenta" type="text" class="post" size="14" maxLength="10">
     </strong></div></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo5 normal_text_white">Nombre</div></td>
     <td width="50%"><div align="left"><strong>
       <input name="nombre" id="nombre" type="text" class="post" size="14" maxLength="10">
     </strong></div></td>
    </tr>
    <tr>
     <td width="50%"><div align="right" class="Estilo8">Clave</div></td>
     <td width="50%"><div align="left"><strong>
       <input name="pass" id="pass" type="password" class="post" size="14" maxLength="10">
     </strong></div></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo7 Estilo8 normal_text_white">Repetir Clave</div></td>
     <td width="50%"><div align="left"><strong>
       <input name="repass" type="password" id="repass" class="post" size="14" maxLength="10">
     </strong></div></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo7 Estilo8 normal_text_white">E-Mail</div></td>
     <td width="50%"><div align="left">
       <strong>
        <input name="email" class="post" type="text" id="email" size="14" maxLength=40>
                                       <input type="hidden" class="post" value="11111111111" maxLength="12" name="personalid" id="personalid" size="14">
       </strong></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="normal_text_white Estilo15"><span class="Estilo7"><span class="Estilo8">Pregunta Secreta</span></span></div></td>
     <td width="50%"><div align="left"><strong>
       <input name="psec" type="text" id="psec" class="post" size="14" maxLength="10">
       <span class="Estilo5">?</span></strong></div></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo7 Estilo8 normal_text_white">Respuesta Secreta</div></td>
     <td width="50%"><div align="left"><strong>
       <input name="rsec" type="text" id="rsec" class="post" size="14" maxLength="10">
     </strong></div></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo7 Estilo8 normal_text_white">Nacionalidad</div></td>
     <td width="50%"><select name="pais"  class="select Estilo16" id="pais">
                              <option value="Argentina">Argentina</option>
                              <option value="Albania">Albania</option>
                              <option value="Algeria">Algeria</option>
                              <option value="Angola">Angola</option>
                              <option value="Armenia">Armenia</option>
                              <option value="Australia">Australia</option>
                              <option value="Austria">Austria</option>
                              <option value="Azerbaijan">Azerbaijan</option>
                              <option value="Bahamas">Bahamas</option>
                              <option value="Bahrain">Bahrain</option>
                              <option value="Bangladesh">Bangladesh</option>
                              <option value="Belarus">Belarus</option>
                              <option value="Belgium">Belgium</option>
                              <option value="Bolivia">Bolivia</option>
                              <option value="Botswana">Botswana</option>
                              <option value="Brazil">Brazil</option>
                              <option value="Brunei">Brunei</option>
                              <option value="Bulgaria">Bulgaria</option>
                              <option value="Burkina+Faso">Burkina Faso</option>
                              <option value="Cameroon">Cameroon</option>
                              <option value="Canada">Canada</option>
                              <option value="Chile">Chile</option>

                            </select></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="Estilo7 Estilo8 normal_text_white">Codigo</div></td>
     <td width="50%"><strong>
        <input type="hidden" name="extcode" id="extcode" value="<? print("$random"); ?>">
                     <input type="text" class="post" maxLength="4" name="personalid" id="personalid" size="4" value="<? print("$random"); ?>" disabled="disabled">
     </strong></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right" class="normal_text_white Estilo8 Estilo7">Ingresar Codigo</div></td>
     <td width="50%"><div align="left">
       <strong>
       <input class="post" type="text" size="4" maxlength="4"name="extcode1" id="extcode1">
       </strong></td>
    </tr>
    <tr> 
     <td width="50%"><div align="right"><strong>
       <input type="submit" name="crear" value="Crear Cuenta" class="button" onclick="generaPeticion ('modulos_carbono/registro2.php')">
     </strong></div></td>
     <td width="50%"><div align="left"><strong>
       <input type="reset" name="borrar" value="Limpiar" class="button">
     </strong></div></td>
    </tr>
   </form>
  #4 (permalink)  
Antiguo 22/04/2011, 13:34
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Como pasar variables del formulario con ajax?
para recolectar los datos del formularios y enviarlos mediante método POST:

Código Javascript: 
Ver original
  1. function getXMLHttpRequest() {
  2.     var xmlHttp;
  3.     try {
  4.         xmlHttp = new XMLHttpRequest();
  5.     } catch(e1) {
  6.         try {
  7.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.         } catch(e2) {
  9.             try {
  10.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  11.             } catch(e3) {
  12.                 xmlHttp = null;
  13.             }
  14.         }
  15.     }
  16.     return xmlHttp;
  17. }
  18.  
  19. function generaPeticion(form) {
  20.     var datos = "";
  21.     var inputs = form.getElementsByTagName("input");
  22.     for (var i = 0, total = inputs.length; i < total; i ++) {
  23.         if(inputs[i].value == "") {
  24.             alert("debe llenar todos los campos");
  25.             return false;
  26.         }
  27.         datos += inputs[i].name+"="+inputs[i].value+"&";
  28.     }
  29.     var xmlHttp = getXMLHttpRequest();
  30.     xmlHttp.onreadystatechange = function() {
  31.         if(xmlHttp.readyState == 4) {
  32.             var r = xmlHttp.responseText;
  33.             alert(r);
  34.         }
  35.     }
  36.     xmlHttp.open("POST", "prueba.php", true);
  37.     xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  38.     xmlHttp.send(datos);
  39.     return false;
  40. }

Cuando obtengo la respuesta lo único que hago es mostrarla en un alert.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #5 (permalink)  
Antiguo 22/04/2011, 21:22
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 13 años
Puntos: 0
Respuesta: Como pasar variables del formulario con ajax?
Cita:
Iniciado por laratik Ver Mensaje
para recolectar los datos del formularios y enviarlos mediante método POST:

Código Javascript: 
Ver original
  1. function getXMLHttpRequest() {
  2.     var xmlHttp;
  3.     try {
  4.         xmlHttp = new XMLHttpRequest();
  5.     } catch(e1) {
  6.         try {
  7.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.         } catch(e2) {
  9.             try {
  10.                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  11.             } catch(e3) {
  12.                 xmlHttp = null;
  13.             }
  14.         }
  15.     }
  16.     return xmlHttp;
  17. }
  18.  
  19. function generaPeticion(form) {
  20.     var datos = "";
  21.     var inputs = form.getElementsByTagName("input");
  22.     for (var i = 0, total = inputs.length; i < total; i ++) {
  23.         if(inputs[i].value == "") {
  24.             alert("debe llenar todos los campos");
  25.             return false;
  26.         }
  27.         datos += inputs[i].name+"="+inputs[i].value+"&";
  28.     }
  29.     var xmlHttp = getXMLHttpRequest();
  30.     xmlHttp.onreadystatechange = function() {
  31.         if(xmlHttp.readyState == 4) {
  32.             var r = xmlHttp.responseText;
  33.             alert(r);
  34.         }
  35.     }
  36.     xmlHttp.open("POST", "prueba.php", true);
  37.     xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  38.     xmlHttp.send(datos);
  39.     return false;
  40. }

Cuando obtengo la respuesta lo único que hago es mostrarla en un alert.
ese codigo recoje todos los datos de mi formulario sin que haga falta especificarlos? Como lo pongo para que cuando hago click en el boton Enviar responda a ese javascript? muchas gracias enserio es de mucha ayuda!
  #6 (permalink)  
Antiguo 23/04/2011, 09:15
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Como pasar variables del formulario con ajax?
Si, exactamente eso es lo que hace, recorre todos los inputs validando que no estén vacíos y tomando un par nombre valor con el formato especifico para ser enviados en el cuerpo del mensaje:

Código Javascript: 
Ver original
  1. for (var i = 0, total = inputs.length; i < total; i ++) {
  2.         if(inputs[i].value == "") {
  3.             alert("debe llenar todos los campos");
  4.             return false;
  5.         }
  6.         datos += inputs[i].name+"="+inputs[i].value+"&";
  7.     }

Ya el resto es enviar por AJAX los datos a prueba.php (cambia a tu script del lado servidor). Claro que tu puedes hacer tus propias validaciones antes de enviar los datos, por ejemplo validar que pass sea igual a repass:

Código Javascript: 
Ver original
  1. if(form.pass.value == form.repass.value)

Acerca de tu pregunta de como llamar el procedimiento:

Código HTML:
<input type="submit" name="crear" value="Crear Cuenta" class="button" onClick="return generaPeticion(this.form)">
Espero que esto aclare tus dudas. SALUDOS.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #7 (permalink)  
Antiguo 24/04/2011, 12:09
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 13 años
Puntos: 0
Respuesta: Como pasar variables del formulario con ajax?
Pegue ese codigo en el .php del formulario como script javascript, le puse la funcion al boton de submit, cambie la ruta del "prueba.php" a "modulos/regsitro2.php" y cuando aprieto el Submit me tira una ventana javascript con el codigo fuente del registro2.php... cual puede ser el problema? saludos y gracias!
  #8 (permalink)  
Antiguo 24/04/2011, 12:21
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Como pasar variables del formulario con ajax?
Eso quiere decir que se estan haciendo las cosas bien

Cita:
Iniciado por laratik Ver Mensaje
Cuando obtengo la respuesta lo único que hago es mostrarla en un alert.
Recuerda que en una comunicación AJAX el servidor te va a devolver todo aquello que sea visible dentro de la pagina, es decir, si estas dandole formato a una pagina:

Código HTML:
<html> 
<head>
<title>Prueba</title>
</head> 
 
<body>
</body> 
</html>
Eso lo tomara y lo enviara como respuesta de la petición, osea no trates de formatear el archivo PHP como si fuera un documento HTML. Solo utiliza lo esencialmente necesario, por ejemplo yo para mis pruebas solo he utilizado:

Código PHP:
<?php
print_r($_POST);
?>
Con esto verifico que hallan llegado bien los datos POST, espero haber sido lo suficientemente claro con la explicación. SALUDOS.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: ajax, pasar, variables, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:40.