Como capturo un elemento de un SELECT dinamico

[isabelramirezmontoya]

Buenas tardes

Tengo el siguiente codigo:

<form method="post" action="insertar.php" name="frm02" onSubmit="return Validar()">

<table width="100%">

<tr>

<td>id:</td>

<td>

<?php

$host="localhost";
$user="principal";
$password="clave";

$connect=mysql_connect($host,$user,$password);
mysql_select_db("proyecto",$connect);
$consulta = mysql_query("select id, nombre, telefono from personas order by id asc",$connect);

?>

<select name=sel1 size="1" style="width:145;" onchange="funcion()">

<?php

for ($i=0;$i<$lado;$i++) {

$a=mysql_result($consulta,$i,0);

echo "<option value=\"".$a."\">".$a."</option>";

}

mysql_close();

?>

</select>

</td>

<td>nombre:</td><td> ***NOMBRE*** </td>
<td>telefono:</td><td> ***TELEFONO*** </td>

</tr>

</form>
</table>


El SELECT se carga con los datos de la una tabla, en el SELECT (sel1) quedan cargados el id, el nombre y el telefono.

Lo que quiero hacer y de lo cual no tengo ni idea como hacelo, es que cuando selecione un id en el SELECT, en la parte que dice ***NOMBRE*** y ***TELEFONO*** aparezca el nombre y el telefono que corresponden a ese id, si vuelvo a cambiar el id seleccionado que el ***NOMBRE*** y el ***TELEFONO*** cambien o se actualicen a ese id.

Lei que se puede hacer con un evento onchange para ejecutar una funcion pero no se como hacer la funcion.

Les agradezco su colaboracion y aportes

Isabel

[lair]

Hola.

Para eso necesitas emplear AJAX:
http://www.tufuncion.com/tutorial_basico_ajax

Especalmente este:
http://www.formatoweb.com.ar/ajax/ej...quest_post.php

Suerte.

[IsaBelM]

no hace falta usar ajax. como bien dices. con una simple función puedes modificar el dom. a la función le pasas el parámetro this.value (suponiendo que el valor de las opciones lleva el nombre y el teléfono, separado por algún carácter, por ejemplo "-"). cuando recibas el parámetro lo divides con el método split() y los insertas en el td correspondiente. a los td que van a ser modificados, les das una id, para así poder tener acceso a ellos de una manera sencilla. también puedes usar nodos, pero eso creo que complicarte, arreglo a tus conocimientos

[isabelramirezmontoya]

Iniciado por IsaBelM

no hace falta usar ajax. como bien dices. con una simple función puedes modificar el dom. a la función le pasas el parámetro this.value (suponiendo que el valor de las opciones lleva el nombre y el teléfono, separado por algún carácter, por ejemplo "-"). cuando recibas el parámetro lo divides con el método split() y los insertas en el td correspondiente. a los td que van a ser modificados, les das una id, para así poder tener acceso a ellos de una manera sencilla. también puedes usar nodos, pero eso creo que complicarte, arreglo a tus conocimientos

Gracias, por tu tiempo

Lo que dice Lair es factible pero es algo muy avanzado para mi, sin embargo dentro de mi ignorancia lo que tu dices de modificar el DOM, es lo correcto. No entiendo mucho de DOM, he leido y visto ejemplos y he realizado varias pruebas pero no me funcionan.

La funcion activadad por un evento onchange debe ser algo parecido a esto:

Funcion datosadicionales() {

//capturo el numero del select del id elegido

var linea = document.frm02.sel1[document.frm02.sel1.selectedIndex].value

var nombre
var telefono

nombre = document.frm02.sel1.......
telefono = document.frm02.sel1......

return (nombre, telefono)

}

En esta parte me pierdo no se que hacer, he realizado varias pruebas con options[i] pero no me funciona, la verdad estoy algo perdido, no se como terminar la funcion.

[IsaBelM]

cuando invoques a la función le pasas la variable this.value, de esta manera ya tienes la opción seleccionada.
ahora en la función recoges esa variable (david-123456789). con el método split() la divides en sus dos partes.
después a los elemtentos le asignias esos valores, usando document.getElementById('campo').innerHTML.
recuerda que has de darle una id distinta a cada td

[isabelramirezmontoya]

Isabel gracias por tu paciencia

De acuerdo a lo que tu me dices, he intentado hacerlo asi, pero no me funciona

<select name=sel1 size="1" style="width:145;" onchange="verdatosadicionales(this.value)">

Funcion verdatosadicionales(this.value) {

var nombre
var telefono


//[0] -> el id - [1] -> el nombre - [2] -> el telefono

document.getElementById('nombre').innerHTML = this.options.value.split(',')[1]">

document.getElementById('telefono').innerHTML = this.options.value.split(',')[2]">

return;

}

<td id="nombre"> </td>
<td id="telefono"> </td>

Disculpa mi ignorancia.

[IsaBelM]

casi que lo tenías hecho. fíjate

function verdatosadicionales(opcion) {

//[0] -> el id - [1] -> el nombre - [2] -> el telefono

document.getElementById('nombre').innerHTML = opcion.split(',')[1];

document.getElementById('telefono').innerHTML = opcion.split(',')[2];

}

como ves he recogido el valor en una variable y esa variable es la que he usado para sacar el nombre y el teléfono

[isabelramirezmontoya]

Iniciado por IsaBelM

casi que lo tenías hecho. fíjate

como ves he recogido el valor en una variable y esa variable es la que he usado para sacar el nombre y el teléfono

function verdatosadicionales(opcion) {

document.getElementById('nombre').innerHTML = opcion.split(',')[1];

document.getElementById('telefono').innerHTML = opcion.split(',')[2];

}

<form name="frm02">

<table width="100%">

<tr>

<td>id:</td>

<td>

<?php

$host="localhost";
$user="principal";
$password="clave";

$connect=mysql_connect($host,$user,$password);
mysql_select_db("proyecto",$connect);
$consulta = mysql_query("select id, nombre, telefono from personas order by id asc",$connect);

?>

<select name=sel1 size="1" style="width:145;" onchange="verdatosadicionales()">

<?php

for ($i=0;$i<$lado;$i++) {

$a=mysql_result($consulta,$i,0);
$b=mysql_result($consulta,$i,1);
$c=mysql_result($consulta,$i,2);

echo "<option value=\"".$a."\">".$a.";".$b.";".$c."</option>";

}

mysql_close();

?>

</select>

</td>

<td>Nombre:</td><td id='nombre'> </td>
<td>Telefono:</td><td id='telefono'> </td>

</tr>

</form>
</table>


Estoy colocando el codigo tal cual esta arriba, pero no me funciona, ¿que me hace falta o en que me estoy equivocando?

[IsaBelM]

el problema es que no estás haciendo lo que te digo

<select name=sel1 size="1" style="width:145;" onchange="verdatosadicionales(this.value)">

<?php

for ($i=0;$i<$lado;$i++) {

$a=mysql_result($consulta,$i,0);
$b=mysql_result($consulta,$i,1);
$c=mysql_result($consulta,$i,2);

echo '<option value="'.$a.','.$b.','.$c.'">'.$a.';'.$b.';'.$c.'</option>';

[isabelramirezmontoya]

Isabel, mil gracias por tu paciencia y colaboracion, ya me funciona como yo queria.