|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

169C.- JavaScript y formulario en una página web.

p169C_javascript__form.aia

- Vamos a introducir distintos datos en la aplicación mediante un formulario en una página web y código JavaScript.

- Saldrá una página web, pulsamos las opciones, le damos al botón "Enviar" y aparecen las opciones en una Etiqueta.

_________________
- Diseño.

- Subimos el archivo javascript_htm.htm

- En esta ocasión el VisorWeb debe ser Visible, ya que en él se mostrará el formulario.

- Archivo javascript_htm.htm

- Pulsa para ver javascript_htm.htm

jjavascript_htm.htm
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
     <script type="text/javascript">
     function enviar_datos() { 
        var Comidass=""
        for(var i=0; i < document.Formulario.Comida.length; i++){
        if(document.Formulario.Comida[i].checked)
        Comidass += document.Formulario.Comida[i].value + ", ";
        }
    
     r = document.Formulario.Nombre.value + ":" + Comidass + ":";
     resultado = r + document.Formulario.Bebida.value + ":" + document.Formulario.Pago.value;
     window.AppInventor.setWebViewString(resultado);    
     }
     // Juan A. Villalpando
      </script>  
   </head>
   
   <body>
      <form action="#" name="Formulario" onsubmit="enviar_datos();">
         <table border="3" cellpadding="5" cellspacing="0" bordercolor="#009900">
          <font face="Arial" size="4">  
            <tr>
               <td align="center">Nombre</td>
               <td><input type="text" name="Nombre" value ="Juan" /></td>
            </tr>

            <tr>
               <td align="center">Comida</td>
               <td>
                     <input type="checkbox" name="Comida" value="Ensalada" checked> Ensalada<br>
                     <input type="checkbox" name="Comida" value="Carne"> Carne<br>
                     <input type="checkbox" name="Comida" value="Pescado"> Pescado<br>
                     <input type="checkbox" name="Comida" value="Tortilla"> Tortilla<br>
                     <input type="checkbox" name="Comida" value="Gazpacho"> Gazpacho
               </td>
            </tr>    
            
            <tr>
               <td align="center">Bebida</td>
               <td>
                     <input type="radio" name="Bebida" value="Agua" checked> Agua<br>
                     <input type="radio" name="Bebida" value="Vino"> Vino<br>
                     <input type="radio" name="Bebida" value="Cerveza"> Cerveza<br>
                     <input type="radio" name="Bebida" value="Refresco"> Refresco
               </td>
            </tr>            
            
            <tr>
               <td align="center">Forma de pago</td>
               <td>
                  <select name="Pago">
                     <option value="NO_pago" selected>[Elige pago]</option>
                     <option value="Contado">Contado</option>
                     <option value="VISA">VISA</option>
                     <option value="Factura">Factura</option>
                     <option value="Cheque">Cheque</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align="center"></td>
               <td><input type="submit" value="Enviar" /></td>
            </tr>
          </font>  
         </table>
      </form> 
   </body>
</html>

_________________
- Bloques.

_________________
- Comentarios.

- Pulsamos el Botón y llamamos a la página javascript_htm.htm

- Esa página contiene un formulario con Cajas de texto, checkbox, radio y option. Los marcamos y pulsamos el botón "Enviar"

- Entraremos en la función

function enviar_datos() {
var
Comidass=""
for
(var i=0; i < document.Formulario.Comida.length; i++){
if
(document.Formulario.Comida[i].checked)
Comidass += document.Formulario.Comida[i].value + ", "; }

r = document.Formulario.Nombre.value + ":" + Comidass + ":";
resultado = r + document.Formulario.Bebida.value + ":" + document.Formulario.Pago.value;
window.AppInventor.setWebViewString(resultado);
}

- Esta función tomará los datos de los elementos marcados y enviará ese resultado a la aplicación de AppInventor mediante setWebWiewString.

- Fíjate que en el chekcbox debemos acumular los datos elegidos, ya que se puede elegir más de uno.

__________________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información