¿Cómo puedo deshabilitar mi botón de envío nuevamente si el campo del formulario no tiene valor porque mi código javascript funciona solo de una manera? Al principio, el botón de enviar está deshabilitado. Luego, si los campos de formulario tienen valores, está habilitado, pero el envío aún está habilitado cuando borro un valor de campo de formulario. No vuelve a estar deshabilitado. También quiero que mi casilla de verificación se incluya en mi código javascript, pero no sé cómo.
Mi función JS:
function isEmpty() { let name = document.getElementById('name').value; let lastname = document.getElementById('lastname').value; let idnumber = document.getElementById('idnumber').value; let pro = document.getElementById('pro').value; let course = document.getElementById('course').value; let phone = document.getElementById('phone').value; let email = document.getElementById('email').value; let port = document.getElementById('port').value; let uploadresume = document.getElementById('uploadresume').value; let left = document.getElementById('left').value; let info = document.getElementById('info').value; let first = document.getElementById('first').value; let second = document.getElementById('second').value; let exam1 = document.getElementById('exam1').value; let exam2 = document.getElementById('exam2').value; let writeup = document.getElementById('writeup').value; if ( name != '' && lastname != '' && idnumber != '' && pro != '' && course != '' && phone != '' && email != '' && port != '' && uploadresume != '' && left != '' && info != '' && first != '' && second != '' && exam1 != '' && exam2 != '' && writeup != '' ) { document.getElementById('apply').removeAttribute('disabled'); } }Mi código HTML para el botón de envío y la casilla de verificación:
<input required type="checkbox" /> <button class="btn-getstarted btn positionss" style="width: 60%" id="apply" data-bs-toggle="modal" data-bs-target="#reviewModal" onclick="verifyapp()" disabled > SUBMIT! </button>¡Muchas gracias!
En JS, null es diferente de cadenas undefined o vacías. y el valor predeterminado de las variables normalmente no está undefined .
Lo digo porque cuando realiza las pruebas de variables en su si (ex name != '' ) el valor de las variables puede ser nulo o indefinido. En esos casos el if no lo atraparía.
otra peculiaridad de JS es que if (name) significa if (name != '' && name != null && name != undefined)
por lo que podría eliminar todos los != '' de su código y debería funcionar.
if ( name && lastname && idnumber && ...Use la validación de formulario , hay varios tipos disponibles, aquí hay uno simple:
Agregue el atributo required en cada control de formulario
No desactives el botón
Con el siguiente ejemplo, intente enviar el formulario con un campo vacío
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <style></style> </head> <body> <main class="container"> <section class="row"> <form id='UI'> <fieldset class="border p-2"> <legend class="float-none w-auto">Form Validation</legend> <label for='text1' class='label-control'>Text 1: </label> <input id='text1' name='data' class='form-control' required value='1'> <label for='text2' class='label-control'>Text 2: </label> <input id='text2' name='data' class='form-control' required value='2'> <label for='text3' class='label-control'>Text 3: </label> <input id='text3' name='data' class='form-control' required value='3'> <label for='text4' class='label-control'>Text 4: </label> <input id='text4' name='data' class='form-control' required> <button class='btn btn-primary float-end mt-2'>Done</button> </fieldset> </form> </section> </main> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script></script> </body> </html>Agregue onkeyup="isEmpty()"
<button class="btn-getstarted btn positionss" style="width: 60%;" id="apply" data-bs-toggle="modal" data-bs-target="#reviewModal" onkeyup="isEmpty()" onclick="verifyapp()" disabled>SUBMIT!</button>