Buenas, tengo una pagina en la que muestro un listado de una agenda, en ella tengo un pequeño buscador, queria subir unas imagenes pero no puedo hasta que tenga más de 30 mensajes :S, asi que os explico un poco:
En el buscador tengo un select en el que muestro los siguientes campos:
- Apellidos
- Nombre
- Empresa
- Relacion
Elijo uno de ellos y escribo en un input type text lo que quiero buscar y luego le doy al boton buscar.
Pues bien, yo queria que cuando pulsara sobre "Relacion" el input donde escribo se cambie por un select con las opciones correspondientes a "Relacion". Esto lo he conseguido con Javascript, el problema es que cada vez que entra en la funcion me crea un salto de linea y la pequeña tabla donde tengo metido el buscador se va haciendo cada vez mas alta.
No se porque me ocurre esto y tampoco sabria eliminar ese salto de linea. Si alguien sabe el porque ocurre o como solucionarlo le agradeceria mucho que me ayudara.
Os dejo el código html:
Código HTML:
<form action="agenda2.php" method="get" name="fbusca">
<table id="tablabusca" width="50%" align="center">
<tr>
<td width="150px"><strong style="color:#FFFFFF">Búsqueda por: </strong></td>
<td><select name="sbusca" onChange="cambia()"> <option>Apellidos</option><option>Nombre</option><option>Empresa</option><option>Relacion</option></select> </td>
<td><input type="text" name="tbusca" size="35" id="tbusca"></td>
<td><input type="submit" value="Buscar"></td>
</tr>
</table>
</form> Y la funcion javascript
:
Código HTML:
<script language="javascript">
function cambia() {
var opcion= fbusca.sbusca.value;
fi=document.getElementById('tablabusca');
if (opcion=="Relacion") {
elemento=document.createElement('select');
elemento.id='tbusca';
elemento.name='tbusca';
elemento.option='hola';
elemento.options[0]=new Option('Suministro');
elemento.options[1]=new Option('Proveedores');
elemento.options[2]=new Option('Admin. Pública');
elemento.options[3]=new Option('Notario');
elemento.options[4]=new Option('Abogado');
elemento.options[5]=new Option('Traductor');
elemento.options[6]=new Option('Amigo');
elemento.options[7]=new Option('Otros');
fi.appendChild(elemento);
//Ya he creado el nuevo elemento, en este caso un select. A continuacion lo sustituyo por el input.
borra=document.getElementById('tbusca');
borra.parentNode.replaceChild(elemento, borra);
}
else {
elemento=document.createElement('input');
elemento.id='tbusca';
elemento.name='tbusca';
elemento.type='text';
elemento.size=35;
fi.appendChild(elemento);
borra=document.getElementById('tbusca');
borra.parentNode.replaceChild(elemento, borra);
}
}
</script>
Gracias y saludos
