Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] habilitar y deshabilitar campos y botones

Estas en el tema de habilitar y deshabilitar campos y botones en el foro de Javascript en Foros del Web. Hola. Tengo 3 opciones de botón de 50, 100 y 300 y otro de otra cantidad. también tengo un botón de enviar. o 50 o ...
  #1 (permalink)  
Antiguo 18/12/2014, 06:39
 
Fecha de Ingreso: enero-2007
Mensajes: 284
Antigüedad: 17 años, 3 meses
Puntos: 1
habilitar y deshabilitar campos y botones

Hola.

Tengo 3 opciones de botón de 50, 100 y 300 y otro de otra cantidad. también tengo un botón de enviar.

o 50 o 100 o 300

o otra cantidad

Lo que quiero hacer es que cuando pinches en 50, 100 o 300 se habilite el botón enviar y que cuando pinches en cantidad se deshabilite el botón. ademas cuando pinchas en otra cantidad tiene que salir un campo de texto.
Una vez que introduces un valor numérico que se habilite el botón enviar y que cuando se borre que se vuelva a deshabilitar.

Os pongo lo que tengo programado:

<script language="javascript" type="text/javascript">

function mostrarReferencia(){
if (document.form.Importe[3].checked == true) {
document.getElementById('desdeotro').style.display ='block';
} else {
document.getElementById('desdeotro').style.display ='none';
}
}

function validarNumeros(e) {
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8) return true;
if (tecla==109) return true;
if (tecla==110) return true;
if (tecla==189) return true;
if (e.ctrlKey && tecla==86) { return true};
if (e.ctrlKey && tecla==67) { return true};
if (e.ctrlKey && tecla==88) { return true};
if (tecla>=96 && tecla<=105) { return true;}
patron = /[0-9]/;
te = String.fromCharCode(tecla);
return patron.test(te);
}
</script>

<body>
...
<input name="Importe" type="radio" value="50" id="Importe_0" onclick="mostrarReferencia();" checked>50&euro;
<input name="Importe" type="radio" value="100" id="Importe_1" onclick="mostrarReferencia();">100&euro;
<input name="Importe" type="radio" value="300" id="Importe_2" onclick="mostrarReferencia();">300&euro;

<input name="Importe" type="radio" value="" id="Importe_3" onclick="mostrarReferencia();" >OTRA CANTIDAD

<div id="desdeotro" style="display:none;">
<input name="Importe" size="10" type="text" id="Importe_3" value="" onKeyDown="return validarNumeros(event)">&euro; </div>

<INPUT name="enviar" TYPE="submit" VALUE="Colaborar">

</body>
  #2 (permalink)  
Antiguo 18/12/2014, 07:07
 
Fecha de Ingreso: diciembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: habilitar y deshabilitar campos y botones

Primero, no puedes poner dos id iguales por lo tanto el textbox no puede tener la misma que el radiobutton y no hace falta que el display se lo des mediante un div, tambien puedes ponerle el display al propio elemento.

Además, en vez de utilizar "if (document.form.Importe[3].checked == true) {} ", puedes utilizar:
Código Javascript:
Ver original
  1. if (document.form.Importe_0.checked || document.form.Importe_1.checked || document.form.Importe_2-checked) {}

con lo que te aseguras de que funciona.

Para la parte de otra cantidad es lo mismo, te recomiendo crear otra función para habilitar el textbox y se la asignas al ultimo radiobutton.

Un saludo
  #3 (permalink)  
Antiguo 18/12/2014, 14:12
 
Fecha de Ingreso: enero-2007
Mensajes: 284
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: habilitar y deshabilitar campos y botones

Hola.

Lo de los dos id iguales tienes razon, ha sido un despiste gracias.
Le de dado un div para que me coja también el signo € después del campo de texto.

Que me aparezca el campo de texto al pinchar en el ultimo radiobutton me sale bien. Lo que no logro es que el boton se deshabilite al pinchar en el ultimo radiobutton y se habilite al pinchar en los 3 primeros.

Alguna sentencia que vaya en esta funcion ?????

function mostrarReferencia() {

if (document.form.Importe_0.checked || document.form.Importe_1.checked || document.form.Importe_2.checked) {

document.getElementById('desdeotro').style.display = 'none';
algo que haga que el boton se habilite

} else {
document.getElementById('desdeotro').style.display = 'block';
algo que haga que el boton se deshabilite
}
}

gracias.
  #4 (permalink)  
Antiguo 18/12/2014, 23:29
Avatar de nemesis866  
Fecha de Ingreso: julio-2009
Ubicación: Jalisco, Mexico
Mensajes: 643
Antigüedad: 14 años, 9 meses
Puntos: 20
Respuesta: habilitar y deshabilitar campos y botones

que tal puedes intentar de esta forma.-

Código Javascript:
Ver original
  1. function mostrarReferencia()
  2. {
  3.         if (document.form.Importe_0.checked || document.form.Importe_1.checked || document.form.Importe_2-checked) {
  4.               document.getElementById('importe_4').disabled = true;
  5.         } else {
  6.               document.getElementById('importe_4').disabled = false;
  7.         }
  8. }

Y cambiar el id del ultimo checkbox.-

Código HTML:
Ver original
  1. <div id="desdeotro" style="display:none;">
  2.         <input name="Importe" size="10" type="text" id="importe_4" value="" onKeyDown="return validarNumeros(event)">&euro;
  3. </div>

Con ayuda de disabled puedes habilitar o desabilitar elementos de un formulario.

Saludos.
__________________
Artículos de programación Web
Twitter.- @codeandoclub
  #5 (permalink)  
Antiguo 19/12/2014, 06:44
 
Fecha de Ingreso: diciembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 4
Respuesta: habilitar y deshabilitar campos y botones

Lo que yo creo que deberias hacer seria darle al botón un atributo de inicio "disabled" y mediante lo mencionado por nemesis866 ( desactivar el botón enviar en vez del textbox) darle el valor "true" si hay uno de los tres checked, "false" cuando este checked el cuarto radiobutton y "true" otra vez cuando el textbox este relleno, para ello te recomiendo utilizar la sentencia else if () {} de manera que:

Código Javascript:
Ver original
  1. if (document.form.Importe_0.checked || document.form.Importe_1.checked || document.form.Importe_2.checked) {
  2.  
  3. document.getElementById('desdeotro').style.display = 'none';
  4. document.form.enviar.disabled = false;
  5.  
  6. }else if(document.form.Importe_3.checked && document.form.Importe_3_2.value.length!=0){
  7.  
  8. document.getElementById('desdeotro').style.display = 'block';
  9. document.form.enviar.disabled = false;
  10.  
  11. }else if(document.form.Importe_3.checked){
  12.  
  13. document.getElementById('desdeotro').style.display = 'block';
  14. document.form.enviar.disabled = true;
  15. }

Además, deberas darle un atributo ' onchange="mostrarReferencia()" ' al textbox y modificar su id por "Importe_3_2"
  #6 (permalink)  
Antiguo 02/01/2015, 05:44
 
Fecha de Ingreso: enero-2007
Mensajes: 284
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: habilitar y deshabilitar campos y botones

Hola.

He cambiado como me habéis indicado y me funciona correctamente.

Muchas gracias.

El problema que tengo es que cuando paso un valor en el campo de texto:

<input name="Importe" size="10" type="text" id="Importe_3_2" ...>

y lo recupero en otra pagina, me da un error. No me lo coge como un numero. En los demás casos me lo coge perfectamente.

ejem:

si paso el valor 250, me devuelve el valor ", 250" y no se porque.

Un saludo.
  #7 (permalink)  
Antiguo 02/01/2015, 05:51
 
Fecha de Ingreso: enero-2007
Mensajes: 284
Antigüedad: 17 años, 3 meses
Puntos: 1
Respuesta: habilitar y deshabilitar campos y botones

la función que utilizo para validar que ese campo sea numerico es la siguiente:

function validarNumeros(e) {
tecla = (document.all) ? e.keyCode : e.which;
if (tecla == 8) return true;
if (tecla == 109) return true;
if (tecla == 110) return true;
if (tecla == 189) return true;
if (e.ctrlKey && tecla == 86) { return true };
if (e.ctrlKey && tecla == 67) { return true };
if (e.ctrlKey && tecla == 88) { return true };
if (tecla >= 96 && tecla <= 105) { return true; }
patron = /[0-9]/;
te = String.fromCharCode(tecla);
return patron.test(te);
}

Etiquetas: botones, campos, deshabilitar, habilitar, input, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:12.