How can I disable the submit button until text is entered in the input field?

Question

I have an issue try to achieve this result, pretty much what I need is to disable the submit button until text is entered in the input field. I've trying some functions but without results. Please if you can help me with this it would be really appreciated.

HTML Markup

<form action="" method="get" id="recipename">
<input type="text" id="name" name="name" class="recipe-name" 
    value="Have a good name for it? Enter Here" 
    onfocus="if (this.value == 'Have a good name for it? Enter Here') {this.value = '';}" 
    onblur="if (this.value == '') {this.value = 'Have a good name for it? Enter Here';}" 
/>
<input type="submit" class="submit-name" value="" />
</form>

Thanks, in advance.

Answer 1

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','');
}
}

Answer 2

$("#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);
    }
});

Answer 3

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.

Answer 4

You could try this:

var nameText = $("#name");

nameText.attr("disabled", "disabled");

nameText.change(function () {
  if(nameText.val().length > 0) {
    nameText.attr("disabled", "");
  } else {
    nameText.attr("disabled", "disabled");
  }

});