jQuery Mobile (VI) - Trabajando con formularios

febrero 13, 2013




En capítulos anteriores...



Seguimos con la sexta entrega de esta serie. Hoy veremos como trabajar con formularios. No vamos a hacer nada raro, simplemente vamos a presentarlos, veremos algunas de sus funciones y algún truquillo. ¡Vamos allá!.

Comentar que jQuery Mobile soporta los formularios estándar de HTML, como inputs, textarea... pero los optimiza para dispositivos móviles mediante llamadas a AJAX.

El mecanismo es bastante sencillo, si nos damos cuenta, cuando rellenamos formularios en HTML, simplemente tenemos que darle a un botón que normalmente se llamará "Enviar". Este tipo de botones lo que hacen es llamar a otros elementos web, que normalmente se encuentran en un servidor, y evalúan los datos que has introducido en el formulario para devolverte una información determinada, ya sea un registro en una web, una validación de usuario, etc.

Formulario base


La pinta de los formularios es la siguiente:

<form action="enviar_datos.php" method="get">

</form>

Cabe destacar que puedes utilizar GET o POST, según sea tu necesidad. Si quieres ver más información sobre como funcionan estos comandos, pásate por aquí.

Además, podemos añadirle efectos de transición cuando pulsamos en el botón "Enviar", poniendo:

<form action"enviar_datos.pho" method="get" data-transition"slide">

</form>

Podéis ver más efectos aquí.

Elementos del formulario

No voy a inventar la rueda, lo mejor será que veáis vosotros mismos la galería de elementos, en vivo y en directo:

http://jquerymobile.com/test/docs/forms/forms-all.html

 Molan eh!

Truco: Subida de Archivos


Hay un pequeño detalle bastante chulo, y es que si queremos realizar subidas de archivos a un servidor, si no tenemos en cuenta el siguiente aspecto nos petará el sistema una y otra vez: en estos casos debemos forzar que no se realicen peticiones con AJAX. El truco:

<form action"enviar_datos.pho" action="get" data-transition"slide" target="_blank">

</form>

Truco: Mini Elementos-Formulario

Hay algo bastante interesante en los formularios y es que los podemos hacer pequeños. Esto significa que serán de un tamaño más reducido para pantallas muy estrechas. Simplemente:

data-mini="true"

 Pinchando aquí encontraréis el resto de elementos.

 Bueno, ya tenéis una presentación amable de los elementos, pero hay que trabajar un poco con ellos. Veamos un ejemplo rápido:

 Nuestro objetivo es enviar un mensaje a un servidor, y que este nos conteste. Para ello vamos a realizar cuatro partes:

 0. El archivo PHP, que deberá estar alojado en tu servidor o en tu directorio www si estás haciendo pruebas.
1. La interface y El formulario
3. Los métodos para recibir el mensaje.

0. El archivo PHP

Guárdalo como enviar_datos.php

<?php
// Si los datos son recibidos vía POST
if (isset($_POST['nume']) && isset($_POST['mesaj'])) {
  // Obtiene los datos en variables
  $nume = strip_tags($_POST['nume']);
  $mesaj = strip_tags($_POST['mesaj']);

  // Si los campos del formulario están completos
  if (strlen($nume)>0 && strlen($mesaj)>0) {
    echo 'Bienvenido <b>'. $nume. '</b><br />El mensaje que has enviado es: <pre>'. $mesaj. '</pre>';
  }
  else {
    echo 'Rellena todos los campos del formulario';
  }
}
?>

1. Interface

   <!DOCTYPE html> 

<html> 

<head> 

 <title>Pruebas con formularios</title> 

 

 <meta name="viewport" content="width=device-width, initial-scale=1"> 



 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />

 <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>

</head> 

<body> 



<div data-role="page">



 <div data-role="header">

  <h1>Pruebas con formularios</h1>

 </div><!-- /cabecera -->




 <div data-role="content">


         <form action="enviar_datos.php" method="post" name="form1" onsubmit="ajaxrequest('enviar_datos.php', 'resp'); return false;">
                    Tu nombre: <input type="text" name="nume" id="nume" size="20" maxlength="33" /><br />
                    Tu mensaje:<br />
                    <textarea name="mesaj" id="mesaj" cols="25" rows="4"></textarea><br />
                    <input type="submit" value="Enviar" />
                </form>
</div><!-- /contenido --> <div data-role="footer"> 
      <h4>Pié</h4> </div><!-- /fin de pié de página --> 
</div><!-- /fin de página -->






</body>
</html>







2. Los métodos para recibir el mensaje. 



Irán en la cabecera, los pongo aquí para que los veamos:


<script type="text/javascript"><!--
// Creamos el objeto XMLHttp dependiendo del navegador
function get_XmlHttp() {
 
  var xmlHttp = null;

  if(window.XMLHttpRequest) {  // para Firefox, IE7+, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) { // para Internet Explorer 5 or 6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}

// envia los datos via POST, y muestra el mensaje recibido
function ajaxrequest(php_file, tagID) {
  var request =  get_XmlHttp();

  // obtiene datos
  var nume = document.getElementById('nume').value;
  var mesaj = document.getElementById('mesaj').value;

  // creamos el par índice=valor
  var  the_data = 'nume='+nume+'&mesaj='+mesaj;

  request.open("POST", php_file, true);

  
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);  // enviamos la petición

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(tagID).innerHTML = request.responseText;
    }
  }
}
--></script>





Como quedaría al final:










   <!DOCTYPE html> 



<html> 



<head> 



 <title>Pruebas con formularios</title> 



 



 <meta name="viewport" content="width=device-width, initial-scale=1"> 








 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />



 <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>



 <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>






<script type="text/javascript"><!--
// Creamos el objeto XMLHttp dependiendo del navegador
function get_XmlHttp() {
 
  var xmlHttp = null;

  if(window.XMLHttpRequest) {  // para Firefox, IE7+, Opera, Safari, ...
    xmlHttp = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) { // para Internet Explorer 5 or 6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlHttp;
}

// envia los datos via POST, y muestra el mensaje recibido
function ajaxrequest(php_file, tagID) {
  var request =  get_XmlHttp();

  // obtiene datos
  var nume = document.getElementById('nume').value;
  var mesaj = document.getElementById('mesaj').value;

  // creamos el par índice=valor
  var  the_data = 'nume='+nume+'&mesaj='+mesaj;

  request.open("POST", php_file, true);

  
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);  // enviamos la petición

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(tagID).innerHTML = request.responseText;
    }
  }
}
--></script>









</head> 



<body> 








<div data-role="page">








 <div data-role="header">



  <h1>Pruebas con formularios</h1>



 </div><!-- /cabecera -->







 <div data-role="content">


         <form action="enviar_datos.php" method="post" name="form1" onsubmit="ajaxrequest('enviar_datos.php', 'resp'); return false;">
                    Tu nombre: <input type="text" name="nume" id="nume" size="20" maxlength="33" /><br />
                    Tu mensaje:<br />
                    <textarea name="mesaj" id="mesaj" cols="25" rows="4"></textarea><br />
                    <input type="submit" value="Enviar" />
                </form>
</div><!-- /contenido --> <div data-role="footer"> 
      <h4>Pié</h4> </div><!-- /fin de pié de página --> 
</div><!-- /fin de página -->






</body>
</html>






Y con esto hemos terminado por hoy. Probadlo y a ver que os parece. Como habéis podido comprobar se sigue la misma lógica que en un desarrollo web. Nos vemos en la siguiente ;)

Share This Story

Tags: ,

Working with Data since 2012.

You Might Also Like

3 comentarios

  1. Samylove26 de octubre de 2013, 16:12

    puse todo el codigo y no me funciona me dice error loading page
    y en el eclipse me dice Xmlhttprequest no puedeleer el archivo

    ResponderEliminar
  2. Blogmio13 de octubre de 2015, 3:14

    me pasa lo mismo!

    ResponderEliminar
  3. CarlosInformática17 de enero de 2016, 17:19

    Solución. Antes de invocar por a la librería de jquery.mobile se tiene que colocar el siguiente código. Esto es porque intenta iniciar la aplicación desde un no-móvil.

    [script]
    $(document).bind('mobileinit',function(){
    $.mobile.pushStateEnabled = false;
    });
    [/script]
    [script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"][/script]

    (PD: El blog me prohibe escribir bien la etiqueta SCRIPT entre signos menor y mayor)

    ResponderEliminar

Sé respetuoso/a, en este blog caben todo tipo de opiniones con respeto y serenidad.

Contact Form :: (」゜ロ゜)」