Mostrar contenido de select-option en un input text

[mensajeescrito]

Hola amigos, a ver si alguien puede ayudarme con esto:

Tengo un codigo que es capaz de seleccionando una option de un combobox, mostrar su

resultado en un input text.

Hasta ahí todo funciona bien ya que muestra en el input el "value" que proviene de la option del select.


Pero es que lo que necesito es que muestre en el input, no el valor del value de la option, sino el "contenido" que hay entre "<option> contenido </option>"


Este es el codigo:

Código Javascript:

var mostrarValor = function(x){
        document.getElementById('comida').value=x;
        }
 

Código HTML:

<form action="#">
     
        <select name="elejir_comida" onchange="mostrarValor(this.value);">
 
            <option value="1">Pizza</option>
            <option value="2">Hamburguesa</option>
            <option value="3">Kebab</option>
        
        </select>
        
        
        
        <input type="text" name="comida" id="comida" value="" />
    
    </form>
 

Gracias de antemano.

[Alexis88]

Eso sucede porque envías el valor asignado al combo el cual equivale al de la opción seleccionada. Lo que debes de hacer es tomar el contenido de la opción seleccionada, de la siguiente manera:

Código HTML:

<select name="elejir_comida" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML);">
 

De este modo, tomas al conjunto de opciones del combo y de este, tomas la opción seleccionada, de la cual obtendrás su contenido.

Saludos

[mensajeescrito]

Perfecto alexis funciona a la perfeccion.

esta vez me llega el contenido del option en vez del value.

Pero acabo de darme cuenta (fallo mio lo adminto), que el problema esta solucionado a la mitad.

veras lo que realmente necesito es esto que has hecho pero que ademas tambien llegue el value.

Me explico.


Cada option tiene su valor en el value y su contenido literal ejemplo "hamburguesa, kebab etc".

Pues lo que necesito, y por desgracia no se hacer es; al seleccionar una option, se carguen a la vez su value en un input y su literal en otro input ambas cosas como digo a la vez al seleccionar la option.

[mensajeescrito]

Acabo de dar con la solucion yo mismo, a no ser que alguien con mas conocimientos que yo, que eso es facil, halle otra manera mejor o pueda pulir la que yo voy a poner ahora.

Bien para mostrar en dos inputs a la misma vez, el value y el contenido del option de un combobox

seria de la siguiente manera::

Código Javascript:

var mostrarValor = function(x){
            document.getElementById('comida').value=x;
            }
 
 
 
    var mostrarValor2 = function(x){
            document.getElementById('comida2').value=x;
            }
 

Código HTML:

<form action="#">
 
<select name="elejir_comida" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML); mostrarValor2(this.value);">
 
 
<option value="1">Pizza</option>
<option value="2">Hamburguesa</option>
<option value="3">Kebab</option>
 
</select>
 
<br/>
 
<input type="text" name="comida" id="comida" value="" />
 
<br/>
 
<input type="text" name="comida2" id="comida2" value="" />
 
</form>
 

Espero que a alguien le sirva este pequeño aporte.

Un saludo.

[Alexis88]

Pudiste haber mandado ambos valores a la misma función.

Código HTML:

<select name="elejir_comida" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML, this.value)">
 

Código Javascript:

var mostrarValor = function(foo, bar){
    document.getElementById('comida').value = foo;
    document.getElementById('comida2').value = bar;
};
 

Saludos

[mensajeescrito]

Gracias Alexis88, eres una maquina.

Ahora me doy cuenta que necesito una cosa mas derivada de la solucion anterio que he puesto, a ver si alguien me puede ayudar que no doy con la solucion y llevo to el dia para el siguente problema:

Tengo un select asi:

Código HTML:

<select name="lista_cursos" id="lista_cursos[]" class="estilo_combo_id_curso" onchange="mostrarValor(this.options[this.selectedIndex].innerHTML, this.value)">
 

Código PHP:

while (
($fila=mysql_fetch_array($res_1)) or
($fila=mysql_fetch_array($res_2)) or
($fila=mysql_fetch_array($res_3)) or
($fila=mysql_fetch_array($res_4)) or
($fila=mysql_fetch_array($res_5)) or
($fila=mysql_fetch_array($res_6)) or
($fila=mysql_fetch_array($res_7))
) {
 
$id_curso = $fila['id_curso'];
 
$nombre_curso = $fila['nombre_curso'];
 
$comentario = $fila['comentario'];
 

Código HTML:

<option value="<?php echo $id_curso ?>"><?php echo $nombre_curso ?> <?php echo $comentario ?></option>
 

Código PHP:

};
 

Código HTML:

</select>
 

El cual pasa el value = "id_curso" y el contenido del option "$nombre_curso", perfectamente a campos inputs,

mendiante:

Código Javascript:

var mostrarValor = function(x, y, z){
document.getElementById('lista_cursos').value=x;
document.getElementById('id_curso').value=y;
 
document.getElementById('comentario').value=z;
}
 

Pero no consigo pasar a un campo input el valor de "comentario"


y es vital por que tengo que pasar a parte de comentario, mas campos. Si me pudieran ayudarme con este campo el resto que falta por implementar ya podria hacerlos yo.


Gracias de antemano.

[Alexis88]

Como veo que colocas el nombre del curso y el comentario juntos como contenido de cada opción, podrías separarlos con un caracter, por ejemplo una barra |, luego separas el contenido desde esa barra con el método split y asignas cada parte a las cajas respectivas.

Código HTML:

<option value="<?php echo $id_curso ?>"><?php echo $nombre_curso ?>|<?php echo $comentario ?></option>
 

Código Javascript:

var mostrarValor = function(x, y){
    var split = x.split("|");
    document.getElementById('lista_cursos').value = split[0]; //El nombre del curso
    document.getElementById('id_curso').value = y;
    document.getElementById('comentario').value = split[1]; //El comentario
}
 

Saludos

[mensajeescrito]

Alexis88, expectacular !!!

despues de todo el dia con esto, acabar el mismo habiendo solucionado el problema.

Casi que descorcho una botella.


Pero una cosa: El poner " | " para separar los contenidos del option para poder posteriomente pasarlos, causa un pequeño inconveniente menor, pero inconveniente al fin y al cabo y es

que cuando despliego el combobox con las options me sale el contenido del texto y la | .

Por ejemplo si despliego el nombre de un curso saldria asi:

curso "photoshop |".


¿Como se puede arreglar esto?

[Alexis88]

Si no quieres que se muestre ahí, podrías crear un pseudo-atributo en el cual iría el comentario, así solamente mostrarías el nombre del curso como contenido de la opción y terminarías mandando tres valores a la función.

Así quedaría la parte que corresponde al <select>:

Código HTML:

<select 
    name="lista_cursos" 
    id="lista_cursos[]" 
    class="estilo_combo_id_curso" 
    onchange="mostrarValor(
        this.options[this.selectedIndex].innerHTML, 
        this.value,
        this.options[this.selectedIndex].getAttribute("data-comentario")
    )"
>
 

Las opciones:

Código HTML:

<option value="<?php echo $id_curso ?>" data-comentario="<?php echo $comentario ?>"><?php echo $nombre_curso ?></option>
 

Y en la función haces lo siguiente:

Código Javascript:

var mostrarValor = function(x, y, z){
    document.getElementById('lista_cursos').value = x; //El nombre del curso
    document.getElementById('id_curso').value = y;
    document.getElementById('comentario').value = z; //El comentario
}
 

Ojo, los pseudo-atributos solo son admitidos en navegadores que soporten HTML5. Para los navegadores que no den soporte para HTML5, como las versiones de IE desde la 8 hacia atrás, puedes utilizar la librería Selectivizr.

Saludos

[mensajeescrito]

Alexis88, he hecho lo de las seudo clases poniendo el "comentario" con el value como has puesto y añadiendo lo de javascript tambien.

Pero si se pasan al otro archivo es algo que no puedo comprobar porque no me muestra los valores en los inputs del archivo destino.


COn lo de antes del split y ' | ' , si se me pasaban y quedaban reflejados en los inputs.

Pero con seudo clases no aparecen los valores id_curso y comentario en los inputs del archivo destino que recibe los valores.

estoy utilizando google crome.


Que puede estar pasando?

He puesto esto en el archivo que manda datos:

Código HTML:

<select>
    <option value="<?php echo $id_curso ?>" data-comentario="<?php echo $comentario ?>"><?php echo $nombre_curso ?></option>
 
</select>
 

y en el archivo destino esto:

Código Javascript:

var mostrarValor = function(x, y, z){
        document.getElementById('lista_cursos').value = x; //El nombre del curso
        document.getElementById('id_curso').value = y;
        document.getElementById('comentario').value = z; //El comentario
    }
 

Código HTML:

<div class="nombre_curso">NOMBRE DEL CURSO</div> 
                    
                    <input type="text" name="nombre_curso" placeholder="Modificar nombre del curso" value="" 
                    
                    id="lista_cursos" class="input_style_nombre_curso" size="43" maxlength="100" autocomplete="on" title="Nombre del curso"/>     
                    
 
 
                    <br/>
                    
                    <input type="hidden" name="id_curso" placeholder="" value="" 
                    
                    id="id_curso" size="43" maxlength="100" autocomplete="on" title=""/>  :no:
 

[Alexis88]

Si los quieres pasar directamente al enviar el formulario y sin hacer más, te va a tocar agregarlos como inicialmente los tenías, pero también puedes capturar esos valores y con un poco de JavaScript los envías.

Código Javascript:

var form = document.getElementsByTagName("form")[0], //El formulario
    select = form.getElementsByTagName("select")[0]; //El combo
 
form.addEventListener("submit", function(event){ //Cuando intente enviar los datos
    event.preventDefault(); //Cancelo el envío
 
    var nombre = select.options[this.selectedIndex].innerHTML, 
        id = select.value,
        comentario = select.options[this.selectedIndex].getAttribute("data-comentario"),
        url = document.URL; //La dirección actual,
        base_url = url.substring(0, url.indexOf("?")); //La URL sin la query string
 
    window.location = base_url + "?nombre=" + nombre + "&id=" + id + "&comentario=" + comentario;
}, false);
 

Lo que hago es lo siguiente. Primero, tomo al formulario y al combo de opciones, luego, cuando envíe los datos del formulario, cancelo el evento que se produce (submit), tomo los valores de la opción seleccionada y la URL actual, pero como envías los datos hacia la misma página, solamente tomo la base de la URL, obviando la query string. Finalmente, hago una redirección hacia la misma página pero enviando los valores capturados.

Saludos

[mensajeescrito]

Alexis88, no es conveniente en lo que llevo entre manos tener que dar al boton enviar "submit" para poder accionar el codigo ultimo que has puesto.


La mejor solucion hast ahora es la que propusiste en la que los datos de la option se concatenaban con un ' | ' y despues se recuperaban en el archivo destino con

javascript con split + getElementById etc...

Esa como digo es la mejor solucion hasta ahora. Y funciona perfectamente.


EL problema es que al encadenar los valores en el option con | , me salen en el menu desplegable del combobox todos los valores y tambien visible el | entre cada uno de ellos.


Yo me conformaria con que todos esos valores , menos el primero, estuvieran no visibles al menos en el desplegable del combobox.

si es que esto es posible.



Si esto no es viable, por que no se pudiera hacer, quedarian las seudo clases como me has explicado, pero el asunto es que no veo que el contenido de las seudoclases salga en los inputs.

Los inputs tienen una id cada uno con id_curso" y "nombre_curso"

rebanandome la cabeza he caido en que quizas no salgan los valores de las seudoclases en los inputs debido a que previamente deberian convertirse las seudoclases en id para que pudieran salir reflejadas en los inputs.


Si es que esto fuera posible.

Ufffffff

[Alexis88]

Se me ocurre que mantengas el comentario en el pseudo-atributo data-comentario y cuando selecciones la opción, otorgues ese valor a una caja oculta (hidden) y el contenido a otra similar, de ese modo, cuando envíes los datos del formulario, también enviarás el nombre del curso y el comentario.

Saludos

[mensajeescrito]

Claro, mantener la seudo-clase junto al value y el contenido del option,

y asi cuando se seleccione la option antes de mandar el formulario se deben ver estos 3 valores del option seleccionado del combobox mostrados en los 3 inputs

id_curso, nombre_curso y comentario

cada uno mostrando su valor en 3 inputs mediante ajax.

Esto de mostrar el contenido automaticamente al seleccionar la option mediante ajax funciona perfectamente, no es problema.

Por eso necesito que se visualicen los 3 campos en los 3 inputs. cuando se seleccione la option, pero no se ven.

Y necesito que se vean.

Y ya posteriormente mandar los datos del formulario con el boton submit (que fuciona tambien).


Solo necesito que se vean en los inputs.

help!!!

Código HTML:

<select
       name="lista_cursos"
       id="lista_cursos[]"
       class="estilo_combo_id_curso"
       onchange="mostrarValor(
           this.options[this.selectedIndex].innerHTML,
           this.value,
           this.options[this.selectedIndex].getAttribute("data-comentario")
       )"
    >
 
<option value="<?php echo $id_curso ?>" data-comentario="<?php echo $comentario ?>"><?php echo $nombre_curso ?></option>   
 
</select>
 

Código Javascript:

var mostrarValor = function(x, y, z){
        document.getElementById('lista_cursos').value = x; //El nombre del curso
        document.getElementById('id_curso').value = y;
        document.getElementById('comentario').value = z; //El comentario
    }
 

Y en estos inputs en donde se tienen que ver los 3 valores y no lo hace:

Código HTML:

<div class="nombre_curso">NOMBRE DEL CURSO</div> 
                    
                    <input type="text" name="lista_cursos" placeholder="Modificar nombre del curso" value="" 
                    
                    id="lista_cursos" class="input_style_nombre_curso" size="43" maxlength="100" autocomplete="on" title="Nombre del curso"/>  
 
 
                    <input type="hidden" name="id_curso" placeholder="" value="" 
                    
                    id="id_curso" size="43" maxlength="100" autocomplete="on" title=""/>  
 
 
 
                    <div class="comentario">COMENT. DEL CURSO</div>   
 
                    <input type="text" name="comentario" placeholder="Insertar o modificar comentario del curso" value="" 
                    
                    id="comentario" class="input_style_comentario" size="43" maxlength="100" title="Comentario del curso"/>
 

[Alexis88]

¿Qué no había quedado solucionada esa parte?

[mensajeescrito]

Si lo pongo es por que no se muestran automaticamente en los inputs.

Como digo uso ajax para que automaticamente que selecciono el option del combobox, se reflejen los valores en los 3 inputs.

De hecho en el ejemplo que me pusiste con split, funciona perfecto, es seleccionar la option y automaticamente se reflejaban los dos valores en los dos inputs.


Pero ahora que se ha añadido la seudoclase y ahora no va, no se reflejan ninguno de los tres.

Y no se porque.

Dicho de otro modo, no dudo que los valores no se pasen del combobox mediante el javascript pero si no se reflejan en los inputs tengo un serio problema.

[mensajeescrito]

Problema solucionado!!!!

Alexis, habia un error en el codigo, un error simple que hacia que no funcionara.

veras en el codigo que me pasaste mira:

Código HTML:

<select
       name="lista_cursos"
       id="lista_cursos[]"
       class="estilo_combo_id_curso"
       onchange="mostrarValor(
           this.options[this.selectedIndex].innerHTML,
           this.value,
           this.options[this.selectedIndex].getAttribute("data-comentario")
       )"
    >
 

¿Ves el error ?

Es en la linea donde pones data-comentario

No deberias haberla puesto entre comillas dobles. sino entre comillas simples ya que esta dentro del onchage

que lleva ya comillas dobles.

[Alexis88]

Jaja, es verdad, no lo noté porque ni siquiera lo probé.

¡Enhorabuena!