Enviar de SELECT a INPUT: Ejemplo completo

Enviar de SELECT a INPUT. En este artículo veremos cómo pasar información de un SELECT a INPUT a través de un atributo personalizado haciendo uso de la librería jQuery y JavaScript.

Hay varias formas de manejar la etiqueta SELECT y es a través de la función onchange. Sin embargo, la idea es obtener el atributo personalizado de la opción de la lista desplegable (SELECT) y establecer el valor para ser enviado a otra entrada. tipo texto (INPUT).

Enviar de SELECT a INPUT
Enviar de SELECT a INPUT

¿Cuál sería la solución de Enviar de SELECT a INPUT?

LA solución sería crear un atributo personalizado con el nombre de data-typeid. Sin embargo, este atributo se agregará en las opciones del SEELCT (option), no en el select

Una vez declarado el atributo podemos leerlo con jQuery y pasar los valores de ese atributo a un input sin problemas.

También tenga en cuenta que los on*atributos están muy desactualizados. Debería utilizar controladores de eventos discretos, algo como esto:

Pasos para Enviar de SELECT a INPUT

Creamos la variable que leerá el atributo del SEELCT haciendo uso del método ATTR()

var type_id = $('select option:selected').attr('data-typeid');

Asignamos la variable al cuadro de entrada para que almacene la información enviada del select:

document.getElementById("money").value =type_id;

Entonces, mostramos toda la función actualizada y se vería así:

function selectFunction(e) {
var type_id = $('select option:selected').attr('data-typeid'); //to get value
document.getElementById("money").value =type_id;
}

Código jQuery completo

$(function() {
$('select.form-control').change(function() {
var typeId = $(this).find('option:selected').data('typeid');
$("#money").val(typeId);
}).change();
});

Script HTML completo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

Segunda forma

Deshabilitando la primera opción de la etiqueta SELECT usando DISABLED de HTML. Por último, también este ejemplo es factible para lograr nuestro objetivo de pasar datos desde un select hacia una etiqueta de tipo input.
Script jQuery

$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});

Script HTML

Declaramos la librería jQuery en la etiqueta head y también el formulario HTML que contiene la etiqueta SELECT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected disabled>-- Select one --</option>
<option data-typeid="1111" value="courseId1">courseName1</option>
<option data-typeid="2222" value="courseId2">courseName2</option>
</select>

<input type="number" value="" id="money" class="form-control">

Código completo

Les dejare el script completo para que puedan probarlo en sus servidores y vean la eficacia de este script. Además, es muy importante declarar la librería del jQuery

<!doctype html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option selected="" disabled="">-- Selecciona --</option>
<option data-typeid="1111" value="courseId1">Curso 01</option>
<option data-typeid="2222" value="courseId2">Curso 02</option>
</select>
<input type="number" value="" id="money" class="form-control">
<script type="text/javascript">
$(document).on('change', 'select.form-control', function() {
var r = $('select.form-control option[value="'+$(this).val()+'"]').attr("data-typeid")
$("#money").val(r)
});
</script>
</body>
</html>

Conclusión

En algunos casos suele ser un problema para los programadores cuando se desea guardar información a MySQL desde la etiqueta select, Por ejemplo, cuando se desea guardar el ID y el nombre u otro valor.

Con esta estrategia se hace más llevadero el manejo de la información, haciendo uso de la librería jQuery y JavaScript que como recordamos trabaja en el lado del cliente (navegador web).

Espero que esta explicación les ayude en sus proyectos que estén realizando.

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

Entradas relacionadas

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split(). Explode es capaz de dividir una cadena de texto o un array y se basa bajo un criterio en común dentro…

Confirmar el envío de formulario sin bucles con jQuery

Confirmar el envío de formulario sin bucles con jQuery

Confirmar el envío de formulario sin bucles con jQuery. En este artículo veremos la forma de mostrar un cuadro de dialogo de conformación antes de enviar un…

Refrescar página usando JavaScript

Refrescar página usando JavaScript: 6 ejemplos completos

Refrescar página usando JavaScript. El método location reload() en HTML DOM se utiliza para volver a cargar el documento actual. Este método, actualiza los documentos actuales. Es…

Generar 3 números aleatorios y que no se repitan JavaScript

Generar 3 números aleatorios y que no se repitan: JavaScript

,Generar 3 números aleatorios y que no se repitan. En este artículo veremos la forma de generar números aleatorios usando «Math.random()» de JavaScript. Esa función devuelve un…

Detectar Checkbox Marcados JavaScript

Detectar Checkbox Marcados JavaScript y jQuery

Detectar Checkbox Marcados JavaScript. Este es un tutorial realizaremos un script sobre cómo detectar cada vez que una casilla de verificación ha sido marcada o desmarcada por…

Validar Checkbox PHP, JavaScript y jQuery

Validar Checkbox PHP, JavaScript y jQuery: Ejemplos

Validar Checkbox PHP, JavaScript y jQuery. Cuando estemos programando un sistema y/o página web siempre nos encontraremos con formularios y por ende con validaciones en algún campo….

Deja una respuesta

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