Wenn das Eingabefeld leer ist, deaktivieren Sie die Schaltfläche "Senden"

Ich versuche, die Schaltfläche zum Senden zu deaktivieren, wenn der Benutzer keinen Text angegeben hat.Wenn das Eingabefeld leer ist, deaktivieren Sie die Schaltfläche "Senden"

Auf den ersten Blick sieht es so aus, als ob alles gut funktioniert, aber wenn der Benutzer einen Text eingibt und dann löscht, wird der Submit-Button aktiviert.

Hier ist mein Code:

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

Quelle

2013-07-17 Saulius s

eine else-Anweisung hinzufügen, dass es – tymeJV

Sie deaktiviert es nie deaktivieren, wenn die Länge 0. – Doorknob

Was Angriffe ist? Verwenden von Aktivieren und Deaktivieren von Attributen sind nicht sicher .... Klicken Sie einfach auf f12 in Ihrem Browser, finden Sie die Übermittlungsschaltfläche in der HTML, und entfernen Sie die deaktivierten! Das Formular wird gesendet, auch wenn die Eingaben leer sind. – Elnaz

Sie deaktivieren nur auf document.ready und dies geschieht nur einmal, wenn DOM bereit ist, aber Sie müssen disable in keyup Ereignis auch wenn Textbox leer wird. Ändern Sie auch $(this).val.length zu $(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); 
    }) 
});

Oder können Sie Bedingungsoperator anstelle von if-Anweisung. auch prop anstelle von attr verwendet als Attribut nicht recommended by jQuery 1.6 ist und oben für Behinderte, usw. geprüft

Ab jQuery 1.6, die .attr() Methode für Attribute undefinierte kehrt , die nicht festgelegt haben. Zum Abrufen und DOM-Eigenschaften ändern wie die Option aktiviert ist, ausgewählt ist, oder deaktivierten Zustand von Formularelementen, verwenden Sie die .prop() Methode, jQuery docs

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

Quelle

2013-07-17 11:54:21 Adil

Danke @Zenith, gute Beobachtung. – Adil

Vielen Dank, @Adil. –

Dieser hat funktioniert. –

Versuchen Sie diesen Code

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

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

prüfen demo Fiddle

Sie verpassen den sonst Teil der if-Anweisung (um die Schaltfläche wieder zu deaktivieren, wenn Textfeld ist emp ty) und Klammern () nach val Funktion in if($(this).val.length !=0){

Quelle

2013-07-17 11:59:05 Nalaka526

dies zu tun

<!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>

Quelle

2013-07-17 12:43:10 Akbar

Eine einfache Möglichkeit, Bitte versuchen Sie:

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


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

Quelle

2014-02-18 15:54:20

Für diejenigen, die Coffee, ich habe setzen die Code verwenden wir global, um die Übermittlungsschaltflächen auf unserem am weitesten verbreiteten Formular zu deaktivieren. Eine Adaption von Adils Antwort oben.

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

Quelle

2016-11-28 15:08:14 jkras

Wenn das Eingabefeld leer ist, deaktivieren Sie die Schaltfläche "Senden"

Antwort

Verwandte Themen