Comunidad de diseño web y desarrollo en internet online

Desplegar textbox segun valor de select

Citar            
MensajeEscrito el 17 Oct 2011 04:59 pm
¿Como puedo hacer para que me despliegue un textbox segun el valor del select?

tengo un select (combo)

si elijen la opcion 3 que se habilite abajo un campo de texto (textbox)

despliegue el textbox segun el valor


espero de su ayuda y gracias de antemano

Por angelo27

Claber

136 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Oct 2011 11:40 pm
Tienes que utilizar Ajax. Te pongo un ejemplo:

En el archivo PHP (donde colocarás el Select y un contenedor div, que es donde colocarás el textbox):

Código PHP :

echo '<select name="selectorForo" id="selectorForo" onChange="controlaForoEscogido()">'; 
echo '<option value ="-1">Seleccione un foro';
echo '<option value ="0">Todos los foros';
echo '<option value ="1">Dudas';
echo '</select><br><br>';

// Aqui ira tu textbox deshabilitado

echo '<AQUI METES EL TEXTBOX CON ESTA PROPIEDAD disabled="disabled" y llamado id="pepe">';


Desde Javascript:

Código Javascript :

function controlaForoEscogido()
{
  var contenedorTextbox=document.getElementById("pepe");
  var SelectorForo=document.getElementById("selectorForo");
  var idForoSeleccionado = SelectorForo.options[SelectorForo.selectedIndex].value;
 
  var ajax=nuevoAjax();
 if(idForoSeleccionado=="3")
    contenedorTextbox.disabled=false;

  ajax.send(null);
}


Evidentemente, falta la funcion genérica de Ajax, que la puedes encontrar por muchas páginas.

Espero que te haya ayudado. Un saludo

Por jomafer

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Oct 2011 01:21 am
de esta forma :

<script language="javascript" src="ajax.js" type="text/javascript"></script>
....

<select name="seletorforo" id="selectorforo" onchange="controlForoEscogido()">
<option value="-1">- Seleccione - </option>
<?php
$sel_ss = "SELECT * FROM pais";
$res_ss = mysql_query($sel_ss, $link);
while($db_ss = mysql_fetch_array($res_ss)){

echo '<option value="'.$db_ss["id_pais"].'">'.$db_ss["nom_pais"].'</option>';

}
?>
</select>



<input name="pepe" type="text" id="pepe" size="35" maxlength="64" disabled="disabled" />



porque no funciona que falta

Por angelo27

Claber

136 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Oct 2011 10:03 pm
<script language="javascript" src="ajax.js" type="text/javascript"></script>
....

<select name="selectorforo" id="selectorforo" onchange="controlForoEscogido()">
<option value="-1">- Seleccione - </option>
<?php
$sel_ss = "SELECT id_pais,nom_pais FROM pais";
$res_ss = mysql_query($sel_ss, $link);
while($db_ss = mysql_fetch_assoc($res_ss)){

echo '<option value="'.$db_ss["id_pais"].'">'.$db_ss["nom_pais"].'</option>';

}
?>

</select>





<input name="pepe" type="text" id="pepe" size="35" maxlength="64" disabled="disabled" />

Yo probaría a cambiar eso que puse en rojo, pero de todas formas...¿Qué es lo que no te funciona? Se muestra el select al menos?? si se muestra, es problema de la función controlForoEscogido() de Javascript

Por jomafer

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Oct 2011 11:01 pm
este es todo el codigo y no habilita el textbox para digitar

INSERT INTO `estudios` (`id_estudios`, `concepto`) VALUES
(1, 'Estudios de postgrado'),
(2, 'Estudios Superiores Completos'),
(3, 'Estudios Superiores Incompletos'),
(4, 'Estudios Técnicos C.'),
(5, 'Estudios Técnicos I.'),
(6, 'Enseñanza Media'),
(7, 'Otros Estudios');


index.php
<script language="javascript" src="ajax.js" type="text/javascript"></script>
...
<script language="javascript">
function controlaForoEscogido() {
var contenedorTextbox=document.getElementById("pepe");
var SelectorForo=document.getElementById("selectorForo");
var idForoSeleccionado = SelectorForo.options[SelectorForo.selectedIndex].value;
var ajax=nuevoAjax();
if(idForoSeleccionado=="3")
contenedorTextbox.disabled=false;
ajax.send(null); }
</script>
...
...
...
<tr>
<td width="50%" nowrap="nowrap" align="right">Estudios <span class="campo_obligatorio">*</span></td></td>
<td nowrap="nowrap">
<select name="SelectorForo" id="SelectorForo" onchange="controlaForoEscogido()">';
<option value="-2">- Seleccione -</option>
<?php
$sel_ee="select *from estudios";
$rel_ee=mysql_query($sel_ee,$link);
while($db_est=mysql_fetch_assoc($rel_ee)){
echo '<option value="'.$db_est["id_estudios"].'">'.$db_est["concepto"].'</option>';
}
?>
</select>
<input name="pepe" type="text" id="pepe" disabled="disabled" />
</td>
</tr>

solamente al seleccionar el item (7, 'Otros Estudios') del combobox se deve crear un textbox para digitar algo y luego guardar

Por angelo27

Claber

136 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2011 12:04 am
Supongo que tendrás el archivo ajax.js en el mismo directorio que index.php ¿no? y que dentro de ajax.js tendrás esta función genérica:

Código Javascript :

function nuevoAjax()
{
  var xmlhttp=false;
  try
  {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    try
    {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (E)
    {
      xmlhttp = false;
    }
  }

  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Por jomafer

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2011 12:08 am
También tienes algunos leves fallos en tu código. Veo que cierras dos celdas cuando solo has abierto una: </td></td>

Otro fallo: ()">'; <----- siendo html no hay que cerrar con punto y coma ni comilla simple

Por jomafer

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2011 01:41 am
hice las correcciones agrege nuevoayax como funcion en el
pero no funciona el text no se habilita:

index.php:
...
<script language="javascript">
function nuevoAjax() {
...}

function controlaForoEscogido()
{
var contenedorTextbox=document.getElementById("pepe");
var SelectorForo=document.getElementById("selectorForo");
var idForoSeleccionado = SelectorForo.options[SelectorForo.selectedIndex].value;

var ajax=nuevoAjax();
if(idForoSeleccionado=="3")
contenedorTextbox.disabled=false;

ajax.send(null);
}
</script>
...
<td nowrap="nowrap">
<select name="SelectorForo" id="SelectorForo" onchange="controlaForoEscogido()">
<option value="-2">- Seleccione -</option>
<?php
$sel_ee="select *from estudios";
$rel_ee=mysql_query($sel_ee,$link);
while($db_est=mysql_fetch_assoc($rel_ee)){
echo '<option value="'.$db_est["id_estudios"].'">'.$db_est["concepto"].'</option>';
}
?>
</select>
</td>
<td>
<input name="pepe" type="text" id="pepe" disabled="disabled" />
</td>
...

Por angelo27

Claber

136 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2011 11:09 am
Prueba a cambiar esto:
var idForoSeleccionado = SelectorForo.options[SelectorForo.selectedIndex].value;
por esto:
var idForoSeleccionado = SelectorForo.value;

Voy a probar tu codigo, a ver si a mi me va

Por jomafer

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Oct 2011 11:12 am
a todo esto, has puesto que se active cuando la opcion sea 3, y debería ser 7.

Por jomafer

14 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.