Habilitar campo de texto según menú
Tengo un formulario web con 20 textfield, según un select debo habilitar 10 y deshabilitar los otros 10.
2 Respuestas
Respuesta de ikermuriel
1
Para hacer eso tienes que darle un ID distinto a cada textfield (txt_1, txt_2... por ejemplo), y luego, en el evento onchange del select usar una función javascript. Te pongo un ejemplo.
<input type="text" ... id="miCampoDeTexto" />
<select ... onchange="cambiarTextfields(this);">
<option value="1">Mi opción 1</value>
<option value="2">Mi opción 2</value>
</select
[ en javascript ]
function cambiarTextfields(selec) {
if (selec.value == 1) {
document.getElementById('miCampoDeTexto').disabled = true;
.... Y así con todos los textfields que quieras desactivar
}
else if (selec.value == 2) {
document.getElementById('miCampoDeTexto').disabled = false;
... Y así con todos los textfields que quieras activar
}
}
<input type="text" ... id="miCampoDeTexto" />
<select ... onchange="cambiarTextfields(this);">
<option value="1">Mi opción 1</value>
<option value="2">Mi opción 2</value>
</select
[ en javascript ]
function cambiarTextfields(selec) {
if (selec.value == 1) {
document.getElementById('miCampoDeTexto').disabled = true;
.... Y así con todos los textfields que quieras desactivar
}
else if (selec.value == 2) {
document.getElementById('miCampoDeTexto').disabled = false;
... Y así con todos los textfields que quieras activar
}
}
Hola, que pena contigo de todas maneras gracias por tu tiempo, ¿lo qué pasa es que seguí tus pasos y creé este ejemplo pero no me ha podido funcionar que estaré haciendo mal?
Gracias por tu inmensa ayuda
<html>
<head>
</head>
<script type="text/javascript">
//...en function y las condiciones puse select en vez de selec pero no paso nada
function cambiarTextfields(selec) {
if (selec.value == 1) {
document.getElementById('textfield').disabled = false;
document.getElementById('textfield2').disabled = false;
document.getElementById('textfield3').disabled = true;
document.getElementById('textfield4').disabled = true;
}
else if (selec.value == 2) {
document.getElementById('textfield').disabled = true;
document.getElementById('textfield2').disabled = true;
document.getElementById('textfield3').disabled = false;
document.getElementById('textfield4').disabled = false;
}
</script>
<body>
</head>
<form id="form1" name="form1" method="post" action="">
<label>novedad
<select name="select" onchange="cambiarTextfields(this);">
<option value="1">N01</option>
<option value="2">N02</option>
<option value="3">N03</option>
<option value="4">N04</option>
</select>
</label>
<p>
<label>1
<input type="text" name="textfield" id="textfield" />
</label>
</p>
<p>
<label>2
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>3
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>4
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
</form>
</body>
</html>
Gracias por tu inmensa ayuda
<html>
<head>
</head>
<script type="text/javascript">
//...en function y las condiciones puse select en vez de selec pero no paso nada
function cambiarTextfields(selec) {
if (selec.value == 1) {
document.getElementById('textfield').disabled = false;
document.getElementById('textfield2').disabled = false;
document.getElementById('textfield3').disabled = true;
document.getElementById('textfield4').disabled = true;
}
else if (selec.value == 2) {
document.getElementById('textfield').disabled = true;
document.getElementById('textfield2').disabled = true;
document.getElementById('textfield3').disabled = false;
document.getElementById('textfield4').disabled = false;
}
</script>
<body>
</head>
<form id="form1" name="form1" method="post" action="">
<label>novedad
<select name="select" onchange="cambiarTextfields(this);">
<option value="1">N01</option>
<option value="2">N02</option>
<option value="3">N03</option>
<option value="4">N04</option>
</select>
</label>
<p>
<label>1
<input type="text" name="textfield" id="textfield" />
</label>
</p>
<p>
<label>2
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>3
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>4
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
</form>
</body>
</html>
Hola, gracias por tu pronta respuesta y el tiempo invertido, aun así no me quiso funcionar con tus paso así que te envío el ejemplo de lo que hice para que por favor me digas que pude haber hecho mal. Infinitas gracias
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
//aqui utilice tambien selec y select pero ningun me dio resultado
function cambiarTextfields(select) {
if (select.value == 1) {
document.getElementById('textfield').disabled = false;
document.getElementById('textfield2').disabled = false;
document.getElementById('textfield3').disabled = true;
document.getElementById('textfield4').disabled = true;
}
else if (select.value == 2) {
document.getElementById('textfield').disabled = true;
document.getElementById('textfield2').disabled = true;
document.getElementById('textfield3').disabled = false;
document.getElementById('textfield4').disabled = false;
}
</script>
</head>
<body>
</head>
<form id="form1" name="form1" method="post" action="">
<label>novedad
<select name="select" onchange="cambiarTextfields(this);">
<option value="1">N01</option>
<option value="2">N02</option>
<option value="3">N03</option>
<option value="4">N04</option>
</select>
</label>
<p>
<label>1
<input type="text" name="textfield" id="textfield" />
</label>
</p>
<p>
<label>2
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>3
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>4
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
//aqui utilice tambien selec y select pero ningun me dio resultado
function cambiarTextfields(select) {
if (select.value == 1) {
document.getElementById('textfield').disabled = false;
document.getElementById('textfield2').disabled = false;
document.getElementById('textfield3').disabled = true;
document.getElementById('textfield4').disabled = true;
}
else if (select.value == 2) {
document.getElementById('textfield').disabled = true;
document.getElementById('textfield2').disabled = true;
document.getElementById('textfield3').disabled = false;
document.getElementById('textfield4').disabled = false;
}
</script>
</head>
<body>
</head>
<form id="form1" name="form1" method="post" action="">
<label>novedad
<select name="select" onchange="cambiarTextfields(this);">
<option value="1">N01</option>
<option value="2">N02</option>
<option value="3">N03</option>
<option value="4">N04</option>
</select>
</label>
<p>
<label>1
<input type="text" name="textfield" id="textfield" />
</label>
</p>
<p>
<label>2
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>3
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>4
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
</form>
</body>
</html>
POR FAVOR, no te molestes en responder ya solucione el problema, pero me di cuenta que no me sirve utilizar disable, por que es un menu de actualización y me elimina el valor del campo de texto ¿tu sabes como utilizar un atributo readonly con java? Gracias
No, lo siento pero yo de Java para web no entiendo. Siento no poder ayudarte :D
Respuesta de zagalet
1
Tienes que hacer una función en javascript y según lo que deseas activas unos u otros
A los del bloque 1 les puedes poner class="bloque1" o otro identificador.
Entonces con jquery seria $(".bloque1").attr("disabled","disabled")
A los del bloque 1 les puedes poner class="bloque1" o otro identificador.
Entonces con jquery seria $(".bloque1").attr("disabled","disabled")