Estoy usando un script Javascript muy fácil (pero funcional para mis necesidades) para validar los campos de entrada.

Aquí mi código principal:

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

Aqui estan mis campos

    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">

Y aquí mi botón Enviar:

    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>

Lo que esto hace es dejar el botón Enviar deshabilitado hasta que todos los campos tengan algún valor ingresado y funcione absolutamente bien, sin embargo, también tengo una opción de selección nueva y adicional que es:

    <select name="Countries">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

Intenté aplicar los siguientes cambios:

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value && txt4.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

    <select name="Countries" id="txt4" onkeyup="manage(this)">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

Sin embargo, no parece funcionar. Algunos consejos de expertos serían muy apreciados. Muchas gracias.

0
sierra 30 oct. 2019 a las 10:05

4 respuestas

La mejor respuesta

La forma adecuada es

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='')

No desea configurar el evento onkyeup, pero onchange. Un evento más universal es oninput.

También debe verificar el atributo de etiqueta de elementos de formulario required, que puede proporcionarle una funcionalidad similar sin javascript. Ver aquí.

0
Jan Turoň 30 oct. 2019 a las 07:15

He hecho este tipo de funcionalidad antes. Así que estoy compartiendo mi código aquí. Código HTML

<form method="Post" class="form">
    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onblur="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onblur="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onblur="manage(this)">
    <select name="Countries" id="txt4"  onchange="manage(this)" class="input">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
    </select>
    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
</form>

Código Javascript:

<script>
function manage($e){
    var input = document.getElementsByClassName("input");  
    var status=false;
    for(var i=0;i<input.length;i++){
        if(input[i].value.trim()!='' && input[i].value.trim()!=null && input[i].value.trim()!=undefined){
            status = true;
        } else {
            status = false;
            break;
        }
    }
    console.log(status);
    if(status===true){
        var email = document.getElementById("txt3").value;  
        if(!(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.trim()))){console.log('1');
            document.getElementById('send').disabled = true;
        } else {console.log('2');
            document.getElementById('send').disabled = false;
        }       
    } else {
        document.getElementById('send').disabled = true;
    }
}

</script>

Hay muchas formas de resolver este tipo de funcionalidad, pero para este caso, he usado el código anterior para lograr el objetivo. Si tiene alguna consulta, hágamelo saber. Gracias.

0
Mohit Sidoliya 30 oct. 2019 a las 09:46

En primer lugar, escuchar el evento keyup en su selección solo funcionará en caso de que el teclado haya cambiado la selección. En caso de que se haya cambiado con el mouse, su evento no se activará. Mejor escuchar onchange

Por otro lado, debe verificar el vacío de todos los campos de texto, como lo hace para txt4.value!='':

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='') {
   ...
}
0
zur4ik 30 oct. 2019 a las 07:17

Ahora funcionará.

function manage(txt) {
    var bt = document.getElementById('send');
    if ( txt.value != '' && txt2.value != '' && txt3.value != '' && txt4.value != '' ) {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}  
 <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">
 <select name="Countries" id="txt4" onchange="manage(this)">
                <option value="">Select Country</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Åland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
              
        </select>

      <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>

      
0
Kaleemullah 30 oct. 2019 a las 07:22