Submit formulario con SELECT: Ejemplo completo

Submit formulario con SELECT. Esta configuración se suele aplicar en sistemas web o paginas web para darle dinamismo al proyecto. Sin embargo, el formulario enviado a través de una etiqueta SELECT del HTML5, lo podemos almacenar en una base de datos, editar registros, etc.

Para lograr nuestro objetivo podemos hacerlo de varias maneras, pero en este artículo lo haremos haciendo uso del lenguaje JavaScript y jQuery.

Submit formulario con SELECT TAG
Submit formulario con SELECT TAG

Enviar formulario al seleccionar opción del selector

La idea del funcionamiento es que al seleccionar una opción de nuestra lista desplegable se desencadenara la opción de envío del formulario, sin presionar ningún otro botón de envío.

Submit formulario con SELECT: Dos Opciones

Para que un formulario se envíe, se tiene que presionar un input de tipo button o un botón. A continuación, veremos dos formar de lograr nuestro objetivo.

A) Primera forma: Usando JavaScript

En este ejemplo muestra un ID selector de países que al elegir uno de ellos se envía el formulario para mostrar el contenido en el idioma seleccionado. Nos apoyaremos del lenguaje PHP para visualizar la opción seleccionada.

Componentes del Script

Para que funcione el script correctamente es necesario los siguientes lenguajes.

  • HTML
  • JavaScript
  • PHP

El formulario que usaremos para este ejemplo posee una etiqueta tipo SELECT y a esta etiqueta le agregaremos un atributo tipo ONCHANGE en el cual albergara una función JavaScript. Sin embargo, al cambiar la opción del selector se enviará el formulario con la opción seleccionada y podemos procesar la información del formulario con PHP u otro lenguaje.

onchange="this.form.submit()"

Nuestra etiqueta select quedaría de la siguiente manera

<select name="paises" id="paises" onchange="this.form.submit()">

Código del formulario completo

<form action="" method="post">
<select name="paises" id="paises" onchange="this.form.submit()">
    <option value="">Seleccione...</option>
    <option value="Argentina">Argentina</option>
    <option value="Brasil">Brasil</option>
    <option value="Mexico">Mexico</option>
</select> 
</form>

La información enviada por el formulario lo procesaremos con PHP para que según la opción enviada se muestre las opciones elegidas, en este caso los países.

<?php
if(isset($_POST["paises"])){$paises=$_POST["paises"];
?>
<div style="padding:20px;"><?php echo "Has elegido el pais: ".$paises."";?></div>
<?php }?>

Script completo de la opcion 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Usando JavaScript</title>
</head>
<body>
<form action="" method="post">
<select name="paises" id="paises" onchange="this.form.submit()">
    <option value="">Seleccione...</option>
    <option value="Argentina">Argentina</option>
    <option value="Brasil">Brasil</option>
    <option value="Mexico">Mexico</option>
</select> 
</form>
<?php
if(isset($_POST["paises"])){$paises=$_POST["paises"];
?>
<div style="padding:20px;"><?php echo "Has elegido el pais: ".$paises."";?></div>
<?php }?>
</body>
</html>

Ver Demo con JavaScript

B) Primera forma: Usando jQuery

Si no deseamos usar JavaScript, podemos usar jQuery para enviar el formulario al elegir una opción en nuestra etiqueta SELECT.

Código jQuery y Librerías externas

Para que la opción de jquery funcione necesitaremos los siguiente

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('#marca').on('change', function() {
     $('#submit').click();
   });
});
</script>

Formulario HTML con ID marca

<form action="" method="post">
<select name="id" id="marca">
    <option value="">Choose</option>
    <option value="Alfa Romeo">Alfa Romeo</option>
    <option value="Cadillac">Cadillac</option>
    <option value="Toyota">Toyota</option>
</select> 
<button id='submit' name="submit">Enviar</button>
</form>

Codigo completo del script

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Usando jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $('#marca').on('change', function() {
     $('#submit').click();

   });
});

</script>
</head>

<body>
<form action="" method="post">
<select name="id" id="marca">
    <option value="">Choose</option>
    <option value="Alfa Romeo">Alfa Romeo</option>
    <option value="Cadillac">Cadillac</option>
    <option value="Toyota">Toyota</option>
</select> 
<button id='submit' name="submit">Enviar</button>
</form>
<?php
if(isset($_POST["id"])){$automovil=$_POST["id"];}
?>
<div style="padding:20px;"><?php echo "Has elegido la marca: ".$automovil."";?></div>
</body>
</html>

Ver demo con jQuery

CONCLUSIÓN DEL ARTICULO

Enviar formularios en la web se puede realizar de varias maneras, por ejemplo, el mas común es usando un botón con la propiedad SUBMIT. Sin embargo, para optimizar la calidad de nuestro código, algún envío se puede realizar usando JavaScript y/o jQuery, etc.

En este artículo hemos aprendido usando un pequeño atributo en la etiqueta SELECT podemos enviar un formulario completo.

También, usando el lenguaje jQuery, pero es necesario declarar la librería.

Espero que esta breve explicación les sirva para sus proyectos web.

Descargar Script completo

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *