Seleccion de Combobox

banrey · #1 (**permalink**) 29/06/2009, 13:23

Muchachos como estan?

Necesito un favor, me podrian indicar como puedo hacer aparecer un campo de tipo text apartir de la seleccion de un combobox, estuve buscando en las FAQ antes de preguntar hay un ejemplo pero no me muestra el codigo por ello hago la pregunta me podrian mostrar como hacerlo.

tengo que realizar el siguiente combobox:

<select>
<option values="1">clientes</option>
<option values="2">status</option>
<option values="3">Fecha</option>
<option values="4">numero de cliente</option>
</select>

y que al sleccionar alguna de las opciones me muestre su repectivo campo tipo text para realizar la busqueda en mi bd.

les agradesco muchisimo la ayuda prestada deante manos....

quimfv · #2 (**permalink**) 30/06/2009, 04:04

Me parece que te complicas la vida...

Para que mostrar inputs distintos, lo que debes hacer es la consulta correcta....

El select te da el nombre del campo y el imput el contenido a buscar, no hace falta mostrar un input distinto para cada opción del select....

En qualquier caso y para que no se diga te doy las dos opciones...

1.-
Cuidado que esto solo esconde los campos no borra su contenido

Código HTML:

<script>
function mostra(obj){
for(i=1;i<=4;i++){
if (i!=obj.value){
	document.getElementById("z"+i).style.display="none";
}else{
	document.getElementById("z"+i).style.display="block";
}
}
}
</script>
</head>

<body>
<select onChange="mostra(this)">
<option value="1">clientes</option>
<option value="2">status</option>
<option value="3">Fecha</option>
<option value="4">numero de cliente</option>
</select>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><span style="display:none" id="z1">clientes<input name="clientes" type="text" id="clientes"></span></td>
  </tr>
  <tr>
    <td><span style="display:none" id="z2">status<input name="status" type="text" id="status"></span></td>
  </tr>
  <tr>
    <td><span style="display:none" id="z3">Fecha<input name="Fecha" type="text" id="Fecha"></span></td>
  </tr>
  <tr>
    <td><span style="display:none" id="z4">numero de cliente<input name="numcliente" type="text" id="numcliente"></span></td>
  </tr>
</table>

2.-

Código HTML:

<script>
function mostra(obj){
var error;
error=0;
if (document.getElementById("campo").value=="0") error=1;
if (document.getElementById("contenido").value.length==0) error=2;

if (error!=0){
switch (error){
  case 1:
    alert("Tienes que elegir un campo");
  break;
  case 2:
    alert("El contenido es nulo");
  break;
}
}else{
	alert("la consulta seria\nWHERE "+ document.getElementById("campo").value+"='"+document.getElementById("contenido").value+"'");
}
}
</script>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Campo <select id="campo" onChange="mostra(this)">
<option value="0" selected>Elige un campo</option>
<option value="clientes">clientes</option>
<option value="status">status</option>
<option value="fecha">Fecha</option>
<option value="numcliente">numero de cliente</option>
</select></td>
  </tr> <tr>
    <td>
Contenido <input name="contenido" type="text" id="contenido" onBlur="mostra(this)"></td>
  </tr>
  </table>

Quim

banrey · #3 (**permalink**) 30/06/2009, 09:49

Magnifico amigo eres fabuloso.

exaptamente el ejemplo numero 1 es el que necesito, necesito es comportamiento, pero ayudame con dos cositas mas por favor:

la primera como puedo recolectar el dato que el usuario ingrese en el campo text para realizar la consulta a mi bd.

y la segunda como haria para borrar el dato segun la seleccion. com otu mismo lo indicastes.

de verdad muchisimas gracias espero que me ayudes con estas dos ultimas preguntas.

estare pendiente de tus comentarios muchisimas gracias denuevo por tomarte el tiempo en ayudarme.

banrey · #4 (**permalink**) 30/06/2009, 14:06

Mcuhachos investigando como hacer la seleccion
consegui el siguiente codigo pero no logro hacer que me recolecte el dato que el usuario pueda tipear en el cambo tipo text para iniciar la busca en la bd adjunto el codigo para que me ayuden con estoy por favor:

<SCRIPT LANGUAGE="JavaScript">

function redirect(x)
{
document.form.htRedirect.value = x;
if (x == 1)
{
if (x == 1) document.getElementById('divFiltro').innerHTML = '<strong>Actividad:   </strong><img id="divImagenes">  <select name="DetalleFiltro" id="DetalleFiltro" onChange="javascript: cambiaColor(document.form.DetalleFiltro.value);"></select>';
var temp=document.form.DetalleFiltro
document.getElementById('divFechas').style.display = 'none'
document.getElementById('divFiltro').style.display = 'block'
document.getElementById('divTxt').style.display = 'none'
document.getElementById('divShipto').style.display = 'none'
document.getElementById('divClientes').style.displ ay = 'none'
for (m=temp.options.length-1;m>0;m--) temp.options[m]=null
for (i=0;i<group[x].length;i++)
{
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
if (x == 1) document.getElementById('divImagenes').src = "images/"+String(temp.options[0].value).substring(0,1)+".gif"
}
else
if (x == 2) //Clientes
{
document.getElementById('divFiltro').innerHTML = '<select name="DetalleFiltro" id="DetalleFiltro"></select>';
document.getElementById('divFechas').style.display = 'none'
document.getElementById('divFiltro').style.display = 'none'
document.getElementById('divTxt').style.display = 'none'
document.getElementById('divShipto').style.display = 'none'
document.getElementById('divClientes').style.displ ay = 'block'
}
else if (x == 4) //Fecha de inicio entre dos fechas
{
document.getElementById('divFiltro').innerHTML = '<select name="DetalleFiltro" id="DetalleFiltro"></select>';
document.getElementById('divFechas').style.display = 'block'
document.getElementById('divFiltro').style.display = 'none'
document.getElementById('divTxt').style.display = 'none'
document.getElementById('divShipto').style.display = 'none'
document.getElementById('divClientes').style.displ ay = 'none'

}
else if (x == 3) //Codigo del acuerdo
{
document.getElementById('divFiltro').innerHTML = '<select name="DetalleFiltro" id="DetalleFiltro"></select>';
document.getElementById('divFechas').style.display = 'none'
document.getElementById('divFiltro').style.display = 'none'
document.getElementById('divTxt').style.display = 'block'
document.getElementById('divShipto').style.display = 'none'
document.getElementById('divClientes').style.displ ay = 'none'
}
else
{
document.getElementById('divFiltro').innerHTML = '<select name="DetalleFiltro" id="DetalleFiltro"></select>';
document.getElementById('divFechas').style.display = 'none'
document.getElementById('divFiltro').style.display = 'none'
document.getElementById('divTxt').style.display = 'none'
document.getElementById('divShipto').style.display = 'none'
document.getElementById('divClientes').style.displ ay = 'none'
}
}

</script>
</head>
<body>
<form method="post" name="form" id="form">
<input name="htRedirect" type="hidden" id="htRedirect" value="<%if isempty(request.form("htRedirect")) then response.Write("0") else response.Write(request.Form("htRedirect"))%>">
<table width="100%" border="0" align="center">
<tr bgcolor="#E1E1E1">
<td width="278" align="left" valign="middle"><font color="#000000"> Filtrar Busqueda por:
<select tabindex="1" name="cmbFiltro" id="cmbFiltro" onChange="javascript: redirect(document.form.cmbFiltro.value);">
<option value="0"selected>Mostrar Todos</option>
<option value="2">Cliente</option>
<option value="3">Código de Acuerdo</option>
<option value="4">Fecha</option>
</select>
</td>
<td width="646" height="30" align="left" valign="middle" id="loco">
<div id="divFiltro"></div>
<div id="divTxt"><font><strong>Código:</strong>
<input name="txtDetalleFiltro" type="text" id="txtDetalleFiltro" value="">
</font>
</div>

<div id="divClientes">
<font><strong>Cliente:</strong>
<input name="cliente" type="text" id="txtClientes" value="">
</font>
</div>
<div id="divShipto"></div>
<div id="divFechas">
<font><strong>Fecha</strong>
<input name="fecha" type="text" id="txtDetalleFiltro" value="">
</font>
</div>

<td align="center" valign="middle" width="55"><font color="#E1EAF2"><a href="javascript: buscar();"><font size="2">GO</font></a> </font></td>
</tr>
</table>
<script language="JavaScript">
redirect(document.form.htRedirect.value);
</script>
</font>
</form>

</body>
</html>

quimfv · #5 (**permalink**) 01/07/2009, 04:33

A mi entender es mucho mejor la segunda opcion y en ella ya tienes solucionado el tema de construir la consulta... como la pasas a la bd es otro tema que dependerá de que lenguage de servidor uses...

Supongamos que vas a usas php luego lo que tienes que hacer es pasar los datos por get por ejemplo

"archivo.php?campo="+ document.getElementById("campo").value
+"&contenido='"+document.getElementById("contenido ").value+"'");

luego en archivo.php usas esos datos para construir la sentencia SQL...

algo así....

Quim

banrey · #6 (**permalink**) 01/07/2009, 10:20

ok otra consulta mas los datos que arrojen la consulta los tengo que mostrar en la misma pagina donde esta el filtro, como lo haria hago la consulta en php despues de javascript o dentro del javascript en la line
ELSE{
consulta php....
}

me refiero a esta linea que me muestra el dato que ingrese por teclado:

else{
alert("la consulta seria\nWHERE "+ document.getElementById("campo").value+"='"+docume nt.getElementById("contenido").value+"'");
}

quimfv · #7 (**permalink**) 02/07/2009, 04:59

Yo usaria ajax, debes entender que javascript "pasa" en el cliente y la consulta a la bbdd "pasa" en el servidor.

Aquí lo que estamos haciendo es usar javascript para construir una peticion al servidor, el "alert(..." de la linea que indicas tiene que sustituirse por la peticion al servidor. La petición la puedes hacer llamando una URL con lo que se recargará toda la pagina o puedes usar ajax para recargar una parte de la pagina...

Código HTML:

<script>
function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id +
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
</script>

clientSideInclude(id, url)

Esta funcion te permite cargar, en un div de la pagina, la url que llames sin recargar toda la pagina...

Luego imagina que tienes una pagina con el filtro y un div con id="resultado" y un archivo.php capaz de construir la sentencia sql, ejecutarla y poner el resultado de la consulta en una tabla...

Si sustituyes el "alert(..." por

clientSideInclude('resultado','archivo.php?campo='+ document.getElementById("campo").value
+'&contenido='+document.getElementById("contenido ").value);

que te parece que va a pasar....

Quim