Mandar no sólo el Value sino también, el Text de un Option

[Etherman]

Creo que es algo sencillo, espero que sepais orientarme.
Tenemos por ejemplo el tipico desplegable de un form:

Código HTML:

<select name="nombre" size="3" multiple>
 
<option value="valor 1">Texto de opción 1</option>
 
<option value="valor 2" selected>Texto de opción 2</option>
 
<option value="valor 3">Texto de opción 3</option>
 
<option value="valor 4">Texto de opción 4</option>
 
</select>
 

Y por ejemplo elejida la "Texto de opción 4", no solo recibe el bendito php el "valor 4" si no tambien el propio "Texto de opción 4" ¿Es posible hacerlo?
Gracias majos

[iovan]

si es posible.

Para recibir el valor del campo y el texto se utiliza javascript, para recibir solo el valor del campo se utiliza php.

Saludos.

[camsworksinc]

Suponiendo lo siguiente:

Código HTML:

<select id='opciones'>
<option value='1'>Opcion 1</option>
<option value='2'>Opcion 2</option>
<option value='3'>Opcion 3</option>
</select>
 

Para obtener tanto el valor como el texto, se usa JavaScript:

Código Javascript:

var campo_select = document.getElementById('opciones');
var indice = campo_select.selectedIndex;
 
var texto = campo_select.options[indice].text;
var valor = campo_select.value;
 

[iovan]

Asi es, y si quieres pasarlo a un PHP utilizas AJAX.

Código Javascript:

.
.
.
.
 
var campo_select = document.getElementById('opciones');
var indice = campo_select.selectedIndex;
 
var texto = campo_select.options[indice].text;
var valor = campo_select.value;
 
    ajax.open("POST", "PHPyAJAX.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            respuesta = ajax.responseText;
        }
    }
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("valor="+valor+"&texto="+texto);
 

Y el archivo PHPyAJAX.php

Código PHP:

$valor = $_POST['valor'];
$texto = $_POST['texto'];
 
echo "El valor el select seleccionado es: ".$valor." y su texto es: ".$texto." <br> Gracias por utulizar Ajax con PHP :D ";
 

Lo que ves escrito en el echo será la respuesta que resivirá en AJAX, si quieres imprimir en pantalla esta respuesta hay que hacer algo como esto:

Código Javascript:

document.getelementbyid('dialogo').innerHTML = respuesta;
 

Un saludo.

[Etherman]

Don php, dice que no lee nada, y lo puse así:

Código HTML:

<form action="PHPyAJAX.php"  id="opciones" >
    <select id='opciones'>
    <option value='1'>Opcion 1</option>
    <option value='2'>Opcion 2</option>
    <option value='3'>Opcion 3</option>
    </select>
<input type="submit" value="Mandarselo a Php" />
 
<script language="Javascript">
    .
    .
    .
     
    var campo_select = document.getElementById('opciones');
    var indice = campo_select.selectedIndex;
     
    var texto = campo_select.options[indice].text;
    var valor = campo_select.value;
     
        ajax.open("POST", "PHPyAJAX.php",true);
        ajax.onreadystatechange=function() {
            if (ajax.readyState==4) {
                respuesta = ajax.responseText;
            }
        }
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.send("valor="+valor+"&texto="+texto);
</script>
</form>
 

¿¿Hay algo mal??
muchisimas gracias por el apoyo, y buen karma!

[iovan]

Muchas gracias amigo.

Y si efectivamente. de esa manera no funciona yo lo escribí asi para poner un ejemplo pero

Te hace falta en ese codigo

1.- Crear el objetoAjax
2.- Crear la funcion en JavaScript
3.- Llamar a esta funcion con enventos como onclick(), onpressdown(), etc.., segun convenga. desde el campo de formulario.

Así es amigo. Aun un falta un caminito algo largo de seguir, pero mira.

Si lees éste árticulo http://www.cristalab.com/tutoriales/...ularios-c165l/ Estarás un paso adelante.

Con gusto te ayudo en cualquier duda que surja. Saludos.

[Saneko]

A mi se me ocurre algo mucho más sencillo, solo con PHP.

En el mismo value de los option escribes todo. Por ejemplo:

Código HTML:

<select name="nombre" size="3" multiple>

<option value="valor 1#Texto de opcion 1">Texto de opción 1</option>
<option value="valor 2#Texto de opcion 2" selected>Texto de opción 2</option>
<option value="valor 3#Texto de opcion 3">Texto de opción 3</option>
<option value="valor 4#Texto de opcion 4">Texto de opción 4</option>

</select> 

Primero esta el "valor 1" un "#" y "Texto de opcion 1". Cuando vayas a procesar este value haras lo siguiente:

Código PHP:

  $datos = $_POST['nombre'];
 
$partes = explode('#', $datos); // separamos el value en 2 partes por el #
 
$valor = $partes[0]; // la primera parte contiene el 'valor 2'
 
$texto = $partes[1]; // la segunda el 'Texto de opcion 2' 
   

Es una forma de conseguir varios datos en el mismo value. Espero que te sirva ^^

[Etherman]

Gracias saneco, me fué muy útil tu idea. Ya que no sabía crear objetos en ajax.