|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) 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 form.htm

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

- Archivo form.htm

- Pulsa para ver form.htm

jform.htm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta charset="utf-8">
</head><body>
<script>
function enviar_datos() {
  event.preventDefault(); // Evita que el formulario se envíe automáticamente
  
  // Obtener los valores de los campos del formulario
  var nombre = document.Formulario.Nombre.value;
  var comidasSeleccionadas = [];
  var checkboxesComida = document.getElementsByName("Comida");
  checkboxesComida.forEach(function(checkbox) {
    if (checkbox.checked) {
      comidasSeleccionadas.push(checkbox.value);
    }
  });
  var bebida = document.querySelector('input[name="Bebida"]:checked').value;
  var pago = document.Formulario.Pago.value;
  var slider = document.Formulario.Slider.value;
  
  // Crear el objeto JSON con los datos obtenidos
  var datos = {
    "Nombre": nombre,
    "Comida": comidasSeleccionadas,
    "Bebida": bebida,
    "Pago": pago,
	"Slider": slider
  };
  
  // Mostrar los datos en formato JSON
  // alert(JSON.stringify(datos));
    salida = JSON.stringify(datos, undefined, 4);
    AppInventor.setWebViewString(salida);

  // document.Formulario.reset(); // Reset form
}

function updateOutput() {
  var rangeValue = document.getElementById("Slider").value;
  document.getElementById("output").textContent = rangeValue;
}
</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">Slider</td>
               <td>
			   <input type="range" id="Slider" name="Slider" value="50" min="0" max="250" oninput="updateOutput()">
               <output name="x" id="output"></output>
			   </td>
            </tr>
            
            <tr>
               <td align="center"></td>
               <td><input type="submit" value="Enviar" /></td>
            </tr>
          </font>  
         </table> 
      </form> 
   </body>
</html>
			

_________________
- Bloques.

__________________________________

 

- 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