Select + textbox

dobled · #1 (**permalink**) 05/06/2003, 09:07

Como hago lo Sgte::::

Tengo un seletc con
1
2
3
4

y 4 textfield mas abajo

al seleccionar 2 se activen 2 textxfield y asi para los demas numeros...

KarlanKas · #2 (**permalink**) 05/06/2003, 10:13

Prueba con esto:

Código:

<html>
<head>
	<script>
	function pepe(total){total+=1
	for (a=1;a<5;a++){
	eval("document.forms[0].elements[a].disabled=(a<=total)?false:true;")
	
	}
	}
	</script>
	<style> form,input,select{font:normal 10px/15px verdana}</style>
</head>

<body>
<form action="javascript:alert('enviando')"
      name="formulario"
      id="formulario">
	  Cajas escribibles:<select onchange="pepe(this.selectedIndex)" name="primero"
	          size="1">
		<option value="1" SELECTED>1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
</select><br><br>
	  Caja 1 <input type="text"
	         name="1"><br>
	 Caja 2 <input type="text"
	         name="2"><br>
	  Caja 3 <input type="text"
	         name="3"><br>
	  Caja 4 <input type="text"
	         name="4"><br>
	  </form>


</body>
</html>

dobled · #3 (**permalink**) 06/06/2003, 08:53

Muy bien..

Una consulta como partiria por defecto con los 4 blockeados??

Renegado · #4 (**permalink**) 06/06/2003, 14:11

ponele asi a los text

<input type="text" name="1" disabled="true" >

o asi

<input type="text" name="1" readonly="true" >

KarlanKas · #5 (**permalink**) 07/06/2003, 05:17

Exacto, es como dice Renegado (Hola Renegado!!)

Revisando el código me di cuenta de que si el que visita la página de primeras sólo quiere una caja de texto no funciona el código. Así uqe he hecho unos mínimos cambios (y he aprovechado para meter el código de Renegado) para que vaya. El resultado es:

Código PHP:

  <html> 
<head> 
    <script> 
    function pepe(total){ 
    for (a=1;a<5;a++){ 
    eval("document.forms[0].elements[a].disabled=(a<=total)?false:true;") 
     
    } 
    } 
    </script> 
    <style> form,input,select{font:normal 10px/15px verdana}</style> 
</head> 
 
<body> 
<form action="javascript:alert('enviando')" 
      name="formulario" 
      id="formulario"> 
 
      Cajas escribibles:<select  
                              onchange="pepe(this.selectedIndex)"  
                            name="primero" 
                              size="1"> 
                                <option value="" SELECTED>--</option> 
                                <option value="1">1</option> 
                                <option value="2">2</option> 
                                <option value="3">3</option> 
                                <option value="4">4</option> 
                        </select> 
<br><br> 
      Caja 1 <input  
                  disabled  
                  type="text" 
                 name="1"> 
            <br> 
     Caja 2 <input  
                 disabled  
                type="text" 
                 name="2"> 
            <br> 
      Caja 3 <input  
                  disabled  
                type="text" 
                 name="3"> 
            <br> 
      Caja 4 <input  
                  disabled  
                type="text" 
                 name="4"> 
            <br> 
 
</form> 
 
 
</body> 
</html>

Espero que así te funcione!

Un saludo!!

dobled · #6 (**permalink**) 12/06/2003, 15:10

funciona de maravillas gracias...

una ultima consultilla
que pasa si mis textfield se llaman tinta1, tinta2...........tinta4

cambia el script??

Kaopectate · #7 (**permalink**) 12/06/2003, 16:07

Hola dobled.

Por lo que veo no cambia, ya que el script de KarlanKas lo que hace es recorrerlos secuencialmente, no los referencia por su nombre.

Saludos.

KarlanKas · #8 (**permalink**) 13/06/2003, 02:58

Gracias Kao, últimamente estoy demasiado liado!!

Es como dices!

DaneelR · #9 (**permalink**) 13/06/2003, 04:15

Aunque parece que ya está resuelta la duda pongo aquí una variante:

<html>
<body>
<select onchange="ponerinputs(this.selectedIndex)" name="primero">
<option value="0">Cuantos campos quieres</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>

<script language="javascript">
function ponerinputs(total)
{
//Aquí si quieres escribes el código del select

for(i=1; i<=total; i++)
document.write("Campo " + i + " <input type='text' name='" + i + "'><br>");
}
</script>

</body>
</html>

KarlanKas · #10 (**permalink**) 13/06/2003, 05:23

DaneelR, tu propuesta está muy bien, pero tiene un pequeño problema, como ya me dijo hace tiempo mi querida tunait (hola leporcia!!), el document.write sirve mientras se está mostrando la página web. Una vez "montada" no se puede utilizar poruque crearía un documento nuevo con el código que se cree. Y es lo uqe pasa con tu código, que lo muestra pero como documento aparte, formado sólo por el código que creas. Te recomiendo que lo cambies por innerHTML.

Un saludo!!

dobled · #11 (**permalink**) 07/07/2003, 08:46

KarlanKas estoy usando tu codigo y anda bien, solo tengo un drama kuando lo uso al final del form y cambio el nro de opciones me cambian los text del principio del form y no los de abajo del select, hay una manera para fijar o dar el text que uno quiere comandar?

KarlanKas · #12 (**permalink**) 07/07/2003, 09:00

Cuenta en el código el número de orden que tienen los input uqe quieres modificar y el número que te salga (empieza por el cero) ponlo en el valor inicial de a en el for:
for(a=primera caja;a<primera caja+4;a++)

otra posibilidad es la siguiente, pero no podrías cambiar el name a las cajas. Bueno sí que puedes cambiarlos pero manteniendo la numeración y cambiando todas los nombres en negritas por el mismo nombre:

<html>
<head>
<script>
function pepe(total){
for (a=1;a<5;a++){
eval("document.forms[0].caja"+a+".disabled=(a<=total)?false:true;")
}
}
</script>
<style> form,input,select{font:normal 10px/15px verdana}</style>
</head>

<body>
<form action="javascript:alert('enviando')"
name="formulario"
id="formulario">

Cajas escribibles:<select
onchange="pepe(this.selectedIndex)"
name="primero"
size="1">
<option value="" SELECTED>--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
Caja 1 <input
disabled
type="text"
name="caja1">
<br>
Caja 2 <input
disabled
type="text"
name="caja2">
<br>
Caja 3 <input
disabled
type="text"
name="caja3">
<br>
Caja 4 <input
disabled
type="text"
name="caja4">
<br>

</form>

</body>
</html>

KarlanKas · #13 (**permalink**) 07/07/2003, 09:09

Con este ejemplo puedes poner el nombre que quieras a las cajas, pero debes introducir el mismo en el array cajas:

<html>
<head>
<script>
//Puedes poner aquí tantas cajas como quieras.
//Comprueba que su nombre coincide con el name de las del formulario.
cajas=["caja1","pepita","leonor","box"]
function pepe(total){
total-=1
for (a=0;a<cajas.length;a++){
eval("document.forms[0]."+cajas[a]+".disabled=(a<=total)?false:true;")
eval("document.forms[0]."+cajas[a]+".style.background=(a<=total)?'white':'#eeeeee';" )
}
}
</script>
<style> form,select{font:normal 10px/15px verdana}input{font:normal 10px/15px verdana;background:#eeeeee;}</style>
</head>

<body>
<form action="javascript:alert('enviando')"
name="formulario"
id="formulario">

Cajas escribibles:<select
onchange="pepe(this.selectedIndex)"
name="primero"
size="1">
<option value="" SELECTED>--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
Caja 1 <input
disabled
type="text"
name="caja1">
<br>
Caja 2 <input
disabled
type="text"
name="pepita">
<br>
Caja 3 <input
disabled
type="text"
name="leonor">
<br>
Caja 4 <input
disabled
type="text"
name="box">
<br>

</form>

</body>
</html>

dobled · #14 (**permalink**) 07/07/2003, 09:10

sos un maestro #####

use el con nombre "caja" y me quedo de pelos

Gracias

KarlanKas · #15 (**permalink**) 07/07/2003, 09:13

No hay por qué darlas!! Me alegro de que te funcione!