How can I disable the submit button until text is entered in the input field?
The only problem with the accpeted solution is that the button is enabled only after focus is removed from the text field (after entering data in it of course). Shouldnt the button be enabled as soon as any text is entered in the field? Here is a solution that implements this.
Link to other solution: Keep button disabled if text is not entered
something like this:
$('.recipe-name').on("keyup", action);
function action() {
if($('.recipe-name').val().length > 0) {
$('#submit-name').prop("disabled", false);
}else {
$('#submit-name').prop("disabled", true);
}
}
$("#textField").keyup(function() {
var $submit = $(this).next(); // or $("#submitButton");
if(this.value.length > 0 && this.value != "Default value") {
$submit.attr("disabled", false);
} else {
$submit.attr("disabled", true);
}
});
call some javascript function like below(giving example for jquery) in onkeyup event
function handleSubmit()
{
if($.trim($('#name').val() == ''))
{
$('.submit-name').attr('disabled','disabled');
}
else
{
$('.submit-name').attr('disabled','');
}
}
You can use this:
var initVal = "Have a good name for it? Enter Here";
$(document).ready(function(){
$(".submit-name").attr("disabled", "true");
$(".recipe-name").blur(function(){
if ($(this).val() != initVal && $(this).val() != "") {
$(".submit-name").removeAttr("disabled");
} else {
$(".submit-name").attr("disabled", "true");
}
});
});
See in jsfiddle.