Enviar datos desde menu de formulario y actualizar en la misma pagina

[Elalux]

Saludos maestros, he aquí mi cuestión.

Tengo un menú <select> dentro de un formulario, ok cada vez que alguien selecciona una opción del menú, mediante un onChange que llama a una función en JavaAcript (getData -se muestra al final de este post-) cargo un archivo en PHP que está en el servidor y lo muestro en mi página sin necesidad de recargarla, ok hasta ahí no hay problema.

El problema viene porque el archivo que traigo desde el server necesita recibir el valor del <option > seleccionado del menú<select>, pero no se cómo enviarle ese valor ya que cuando se especifica el archivo a traer en el <select> aún no sé que opción va a seleccionar el usuario, a continuación pongo el código:

Menú:

<select name="elemento" id="elemento" onChange="getData('recibido.php', 'targetDiv')">
<option value="1">Primer elemento</option>
<option value="2">Segundo elemento</option>
<option value="3">Tercer Elemento</option>
<option value="4">Cuarto Elemento</option>
</select>

Contenido archivo que traigo desde el Server (recibido.php)

<?
echo "Valor recibido: ".$_GET['elemento'];
?>

Donde deseo que se muestre el resultado de recibido.php pongo:

<div id="targetDiv">
The fetched data will go here.
</div>

Como ven, no tengo mayor problema para procesar el archivo recibido.php sin recargar la página, el problema es que no se como enviarle el valor del <option> seleccionado.

Desde ahora agradezco cualquier ayuda.

P.D. Por si a alguien le sirve, pongo el código JavaScript que se encarga de traer el archivo desde el server sin recargar la página.

<script language = "javascript">
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}
</script>

[Elalux]

Resuelto!! por si a alguien le sirve les cuento como:

Simplemente en lugar de llamar a la función a través de un evento onChangue la llamo a través de un evento onClick en cada uno de los <option> del menú, de tal forma que queda como sigue:

<select name="elemento" id="elemento">
<option value="1" onClick="getData('recibido.php?elemento=1', 'targetDiv')">Primer elemento</option>
<option value="2" onClick="getData('recibido.php?elemento=2', 'targetDiv')">Segundo elemento</option>
<option value="3" onClick="getData('recibido.php?elemento=3', 'targetDiv')">Tercer Elemento</option>
<option value="4" onClick="getData('recibido.php?elemento=4', 'targetDiv')">Cuarto Elemento</option>
</select>

Saludos.

[Elalux]

Canté victioria demasiado pronto. No funciona con Explorer 6.0

Parece ser que IE/6.0 no puede disparar un onClick dentro de un <option> de un formulario.

Voy a postear este problema en el foro específico de Javascript a ver si alguien me hecha un mano.

Saludos.

[Bellenger]

asi...

Código:

<select name="elemento" id="elemento" onChange="getData('recibido.php?id='+this.value, 'targetDiv')">

y en el php recojes asi:

Código:

 echo $_GET['id'];

listo con eso solucionas el problema...

[mahia]

Hola por favor tu crees que me puedas decir como yo envio la informacion de un formulario desde una imagen.

[GatorV]

A que te refieres desde una imagen?

Saludos.

[flashtkd]

el codigo completo quedaria asi ?

ya que no me funciona:

index.html

Código PHP:

  <script language = "javascript">
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}
</script>

<select name="elemento" id="elemento" onChange="getData('recibido.php?id='+this.value, 'targetDiv')">
<option value="1" onClick="getData('recibido.php?elemento=1', 'targetDiv')">Primer elemento</option>
<option value="2" onClick="getData('recibido.php?elemento=2', 'targetDiv')">Segundo elemento</option>
<option value="3" onClick="getData('recibido.php?elemento=3', 'targetDiv')">Tercer Elemento</option>
<option value="4" onClick="getData('recibido.php?elemento=4', 'targetDiv')">Cuarto Elemento</option>
</select>

<br><br>

<div id="targetDiv">
The fetched data will go here.
</div> 
  

recibido.php

Código PHP:

  <?php

echo "Valor recibido: ".$_GET['elemento'];

echo $_GET['id'];

?>