0

Buenas,

mi pregunta es acerca de este bloque de código que hace que un botón de pago se bloquee y se desbloquee en función del contenido de unos input fields y del precio total. Os copio sólo la parte pertinente para que veáis la idea:

if (finalprice1_1 <= 0 || userstring1.length < 3 || userstring1.length > 16 || passwordstring1.length < 3 || passwordstring1.length > 16)  {
    orderbutton1.disabled = true;
    buttonerrormsg1.innerHTML = "<p>Please make sure that there are no empty fields and that they all contain valid information.</p>";
} else {
    orderbutton1.disabled = false;
}

El if/else statement me funciona perfectamente, el único problema es que realmente estoy especificando que si no se cumplen las condiciones al clickearlo, se bloquee el botón y salte el aviso de texto dentro de un , haciendo así imposible que un usuario pueda rellenar los campos bien y volver a clickear dicho botón (ya que se encuentra bloqueado del primer intento).

¿Como podría especificar que al clickear en algún área de la página (tras estar el botón ya disabled del primer intento) se permita clickear otra vez el botón para poder ejecutarse de nuevo la comprobación del if/else - o alguna solución parecida (esto indefinidamente hasta que el usuario rellene todos los campos bien)?

Muchas gracias de antemano!

1
  • Registra el evento onfocus en el elemento form. Ante ese evento se invoca una función en la que usa la propiedad event.target para delegar el evento. Para saber si alguno de esos campos tiene el foco, usa event.target.nodeType === 'INPUT' Commented el 16 mar. 2017 a las 14:23

1 respuesta 1

0

Creo que deberías habilitar el botón si y solo si sobre alguno de los campos involucrados se ha presionado alguna tecla, de modo de volver a habilitar el botón en cuestión únicamente cuando es bastante probable que el usuario haya hecho algún cambio, dado que no tiene caso hacerlo si los datos van a ser los mismos que ya no fueron validos. Ej:

function usuarioInteractuo(){
    var btn = document.getElementById('boton');
    btn.disabled=false;
}

function deshabilitarBoton(){
    var btn = document.getElementById('boton');
    btn.disabled=true;
}
Campo 1: <input type="text" onkeyup="usuarioInteractuo()" /><br />
Campo 2: <input type="text" onkeyup="usuarioInteractuo()" /><br />
Campo 3: <input type="text" onkeyup="usuarioInteractuo()" /><br /><br />
<input id="boton" type="button" onclick="deshabilitarBoton()" value="soy un boton" disabled="true" />

5
  • Esta opción es fácil y me gusta, el problema es que la función que asigne a "onkeyup" no es cíclica. Si un usuario edita los datos tecleando un campo y vuelve a introducir por segunda vez un valor que está mal, entonces tendría que recargar la página para tener más intentos.
    – psy
    Commented el 16 mar. 2017 a las 14:35
  • La validacíon que copiaste esta en javascript por lo cual es del lado del cliente, porque decis que se recargaria la pagina? Commented el 16 mar. 2017 a las 14:39
  • Me refiero a que el onkeyup se ejecuta desde que el usuario que teclea suelta la primera tecla en ese campo input (desbloqueando nuevamente el botón), pero si luego prueba el botón y su opción introducida sigue sin concordar con los criterios del if/else, se bloquea este de nuevo y la función on keyup ya habrá sido ejecutada. Por tanto si el usuario vuelve a teclear para corregir sus datos una tercera vez, ya no registra el "onkeyup" , ¿o me equivoco?
    – psy
    Commented el 16 mar. 2017 a las 14:45
  • No hay problema, onkeyup es un evento que se ejecutara tantas veces como este ocurra. Voy a hacer una edición al codigo de ejemplo que puse para que lo veas mejor. Commented el 16 mar. 2017 a las 14:47
  • vale si, estoy loco, funciona perfecto, muchísimas gracias! :))
    – psy
    Commented el 16 mar. 2017 a las 14:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.