Disattiva pulsante Invia fino a riempire i campi di input

Question

Mi chiedevo se qualcuno potesse indicarmi la giusta direzione con il seguente pezzo di jquery. Voglio disattivare il pulsante di invio fino a quando i miei campi di input sono stati compilati.

Sono venuto su con questo

$(document).ready(function(){ 
if ($('#inputName, #inputEmail, #inputTel').val().length > 0) { 
    $("input[type=submit]").attr("disabled", "false"); 
} 
else { 
    $("input[type=submit]").attr("disabled", "true"); 
} 
}); 

ma il pulsante è permanentemente disabili, anche dopo aver riempito in tutti i campi di input di testo

studente Jquery e non lo hanno usato per un po '.. Così tutti i puntatori apprezzato

Grazie

Answer 1

Il vostro evento vincolante è solo su documento pronto.

Quindi non c'è nessun listener quando si modifica qualcosa.

fare questo, invece:

Answer 2

cambiamento delle proprietà di un pulsante e non l'attributo ... utilizzare prop() invece di attr()

$(document).ready(function(){ 
    if ($('#inputName, #inputEmail, #inputTel').val().length > 0) { 
    $("input[type=submit]").prop("disabled", false); 
    } 
    else { 
    $("input[type=submit]").prop("disabled", true); 
    } 
}); 

e Presumo che ciò non ha senso dal momento che non si ha comunque vincolante su di esso .. questo sarà solo verificare se l'ingresso ha valore in document.ready o no .. però evento vincolante o meno che dipende da te .. ma per questi motivo particolare prop() è stato introdotto nella versione successiva di jquery ...

aggiornamento

dopo aver visto i commenti qui sotto,

$(function(){ 
    validate(); 
    $('input[type="text"]').keyup(validate); //you can use your multiple id selector instead of the attribute selector that i am using 
}); 

function validate() { 
    var inputvalue = $('input[type="text"]').filter(function (n) { 
    return this.value.length > 0; 
    }) 

    if (inputvalue.length == $('input[type="text"]').length) { 
    $("input[type=submit]").prop("disabled", false); 
    } else { 
    $("input[type=submit]").prop("disabled", true); 
    } 
} 

questo dovrebbe funzionare per qualsiasi numero di ingressi di tipo come testo (non è necessario cambiare i codici javascript/jquery affatto) ... Ecco il fiddle

Answer 3

il codice corrente va bene , ma non risponde agli eventi dell'utente, che è dove stai inciampando.

$('#inputName, #inputEmail, #inputTel').keyup(function(){ 
    if($(this).val().length > 0){ 
     $("input[type=submit]").prop("disabled", false); 
    }else{ 
     $("input[type=submit]").prop("disabled", true); 
    } 
}); 

Modifica in realtà, questo non funzionerà. perché uno di questi elementi causerà l'attivazione del pulsante di invio, indipendentemente dagli altri. Ti aggiornerò per un attimo.

Modifica Ecco la bozza di correzione, probabilmente potrebbe essere più carina, ma sarà sicuramente un buon punto di partenza.

var toValidate = $('#inputName, #inputEmail, #inputTel'), 
    valid = false; 
toValidate.keyup(function() { 
    if ($(this).val().length > 0) { 
     $(this).data('valid', true); 
    } else { 
     $(this).data('valid', false); 
    } 
    toValidate.each(function() { 
     if ($(this).data('valid') == true) { 
      valid = true; 
     } else { 
      valid = false; 
     } 
    }); 
    if (valid === true) { 
     $('input[type=submit]').prop('disabled', false); 
    }else{ 
     $('input[type=submit]').prop('disabled', true);   
    } 
}); 

And here's your jsFiddle illustrating this method

Answer 4

è necessario eseguire nuovamente il comando per attivare se che può essere fatto su change caso di ingresso

function updateSubmit(){ 
    if ($('#inputName').val().length+$('#inputEmail').val().length+$('#inputTel').val().length > 2) { 
    $("input[type=submit]").prop("disabled", false); 
    } 
    else { 
    $("input[type=submit]").prop("disabled", true); 
    } 
} 

$(document).ready(function(){ 
    updateSubmit(); 
    $('#inputName, #inputEmail, #inputTel').on('change',function(){ 
    updateSubmit(); 
    }); 
}); 

Answer 5

Utilizza il modulo onSubmit. Bello e pulito. Non devi preoccuparti del fatto che gli eventi di modifica e di pressione dei tasti vengano attivati.Non devi preoccuparti di problemi di key-up e di messa a fuoco.

http://www.w3schools.com/jsref/event_form_onsubmit.asp

<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()"> 
    ... 
</form> 

function validateCreditCardForm(){ 
    var result = false; 
    if (($('#billing-cc-exp').val().length > 0) && 
     ($('#billing-cvv').val().length > 0) && 
     ($('#billing-cc-number').val().length > 0)) { 
      result = true; 
    } 
    return result; 
}