Jeśli pole wejściowe jest puste, wyłącz przycisk przesyłania

Próbuję wyłączyć przycisk przesyłania, jeśli użytkownik nie podał żadnego tekstu.Jeśli pole wejściowe jest puste, wyłącz przycisk przesyłania

Na pierwszy rzut oka wygląda na to, że wszystko działa dobrze, ale jeśli użytkownik wpisze jakiś tekst, a następnie usunie go, przycisk przesyłania zostanie włączony.

Oto mój kod:

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 
    $('#message').keyup(function(){ 
     if($(this).val.length !=0){ 
      $('.sendButton').attr('disabled', false); 
     } 
    }) 
});

Źródło

2013-07-17 Saulius s

Dodaj else, który wyłącza go – tymeJV

nigdy go wyłączyć, jeśli długość wynosi 0. – Doorknob

Co o atakach? używanie atrybutów włączania i wyłączania nie jest bezpieczne. Po prostu kliknij przycisk F12 w przeglądarce, znajdź przycisk przesyłania w html, a następnie usuń wyłączone! Przekaże formularz, nawet jeśli dane wejściowe są puste. – Elnaz

Jesteś wyłączanie tylko na document.ready a to zdarza się tylko raz, gdy DOM jest gotowy, ale trzeba disable w keyup przypadku gdy pole tekstowe pobiera zbyt pusty. Również zmienić $(this).val.length do $(this).val().length

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 
    $('#message').keyup(function(){ 
     if($(this).val().length !=0) 
      $('.sendButton').attr('disabled', false);    
     else 
      $('.sendButton').attr('disabled',true); 
    }) 
});

Albo można użyć operatora warunkowego zamiast if. również użyć rekwizyt zamiast attr jako atrybut nie jest recommended by jQuery 1.6 i powyżej dla niepełnosprawnych, sprawdzone itd

Jak jQuery 1.6, .attr() zwraca niezdefiniowane dla atrybutów , które nie zostały ustawione. Aby pobrać i zmienić właściwości DOM takie jak sprawdzonej, wybrane, czy wyłączony stan elementów formularzy, należy użyć metody .prop(), jQuery docs

$(document).ready(function(){ 
    $('.sendButton').prop('disabled',true); 
    $('#message').keyup(function(){ 
     $('.sendButton').prop('disabled', this.value == "" ? true : false);  
    }) 
});

Źródło

2013-07-17 11:54:21 Adil

Dzięki @Zenith, dobra obserwacja – Adil

Dziękuję, @Adil, –

Ten został opracowany –

Spróbuj kod

$(document).ready(function(){ 
    $('.sendButton').attr('disabled',true); 

    $('#message').keyup(function(){ 
     if($(this).val().length !=0){ 
      $('.sendButton').attr('disabled', false); 
     } 
     else 
     { 
      $('.sendButton').attr('disabled', true);   
     } 
    }) 
});

Sprawdź demo Fiddle

Brakuje części else instrukcji if (aby wyłączyć przycisk ponownie, jeśli pole tekstowe ma wartość emp Ty) i nawiasy () po val funkcja w if($(this).val.length !=0){

Źródło

2013-07-17 11:59:05 Nalaka526

Spróbuj tego

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Jquery</title> 
    <meta charset="utf-8">  
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script> 
    </head> 

    <body> 

    <input type="text" id="message" value="" /> 
    <input type="button" id="sendButton" value="Send"> 

    <script> 
    $(document).ready(function(){ 

     var checkField; 

     //checking the length of the value of message and assigning to a variable(checkField) on load 
     checkField = $("input#message").val().length; 

     var enableDisableButton = function(){   
     if(checkField > 0){ 
      $('#sendButton').removeAttr("disabled"); 
     } 
     else { 
      $('#sendButton').attr("disabled","disabled"); 
     } 
     }   

     //calling enableDisableButton() function on load 
     enableDisableButton();    

     $('input#message').keyup(function(){ 
     //checking the length of the value of message and assigning to the variable(checkField) on keyup 
     checkField = $("input#message").val().length; 
     //calling enableDisableButton() function on keyup 
     enableDisableButton(); 
     }); 
    }); 
    </script> 
    </body> 
</html>

Źródło

2013-07-17 12:43:10 Akbar

An łatwy sposób zrobić:

function toggleButton(ref,bttnID){ 
    document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true); 
} 


<input ... onkeyup="toggleButton(this,'bttnsubmit');"> 
<input ... disabled='disabled' id='bttnsubmit' ... >

Źródło

2014-02-18 15:54:20

Dla tych, które używają coffeescript, mam umieścić Kod używamy globalnie, aby wyłączyć przyciski przesyłania w naszym najczęściej używanym formularzu. Adaptacja powyższej odpowiedzi Adila.

$('#new_post button').prop 'disabled', true 
$('#new_post #post_message').keyup -> 
    $('#new_post button').prop 'disabled', if @value == '' then true else false 
    return

Źródło

2016-11-28 15:08:14 jkras

Jeśli pole wejściowe jest puste, wyłącz przycisk przesyłania

Odpowiedz

Powiązane problemy