Methode nur OnLoad Jquery

Question

Ich versuche, eine einfache Benutzereingabe Text und um Probleme zu vermeiden, möchte ich die Schaltfläche Senden nicht klicken, wenn kein Text eingegeben. Das ist, was ich habe, so weit:

$(function() { 
    if ($("#formSearchUserId").val() == "") { 
    $('#userIdBtn').prop('disabled', true); 
    } else { 
    $('#userIdBtn').prop('disabled', false); 
    } 
}); 

Dies funktioniert onload weil da kein Text standardmäßig in der Eingabe ist, wird die Taste deaktivieren. Wenn ich jedoch Werte in die Eingabe eingib, bleibt die Schaltfläche deaktiviert.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie sollten Ihren Code in einen Event-Handler wickeln. Was es tut, ist, dass es nach Änderungen in Ihrer Eingabe Ausschau hält und die Funktion auslöst, an die bei Änderungen eine Funktion übergeben wird.

$(document).ready(function(){ 
 
    $("#formSearchUserId").change(function() { 
 
    console.log($("#formSearchUserId").val()) 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } else { 
 
    $('#userIdBtn').prop('disabled', false); 
 
    } 
 
}).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=formSearchUserId name=formSearchUserId /> 
 
<button id=userIdBtn>Search</button>

Answer 2

mit keyup:

$(document).ready(function(){ 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } 
 
    $("#formSearchUserId").keyup(function() { 
 
    console.log($("#formSearchUserId").val()) 
 
    if ($("#formSearchUserId").val() == "") { 
 
    $('#userIdBtn').prop('disabled', true); 
 
    } else { 
 
    $('#userIdBtn').prop('disabled', false); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=formSearchUserId name=formSearchUserId /> 
 
<button id=userIdBtn>Search</button>

Answer 3

Sie auch in .keyup aussehen kann. Überprüfen Sie, ob value verfügbar ist. Sie können .trim hinzufügen, um Fälle zu vermeiden, in denen nur Leerzeichen vorhanden sind.

$("#formSearchUserId").on("keyup", function(){ 
 
    $('#userIdBtn').prop('disabled', !this.value.trim().length>0) 
 
}) 
 

 
$(function(){ 
 
    $("#formSearchUserId").trigger("keyup"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="text" id="formSearchUserId"/> 
 
<button id="userIdBtn">Id Btn</button>