¿Cómo puedo desactivar el botón de enviar hasta que se ingrese texto en el campo de entrada?

Question

Tengo un problema para lograr este resultado, casi lo que necesito es desactivar el botón de enviar hasta que se ingrese texto en el campo de entrada. He intentado algunas funciones pero sin resultados. Por favor, si me pueden ayudar con esto, sería muy apreciado.

Formato HTML

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

Gracias, por adelantado.

Answer 1

Puede utilizar esta:

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

Véase en jsfiddle.

Answer 2

llamada alguna función javascript, como a continuación (ejemplo dando para jQuery) en caso onkeyup

function handleSubmit() 
{ 
if($.trim($('#name').val() == '')) 
{ 
$('.submit-name').attr('disabled','disabled'); 
} 
else 
{ 
$('.submit-name').attr('disabled',''); 
} 
} 

Answer 3

$("#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 4

Usted podría intentar esto:

var nameText = $("#name"); 

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

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

}); 

Answer 5

El único problema con la solución accpeted es que el botón se activa sólo después de que el foco se retira del campo de texto (después de introducir los datos en ella, por supuesto). ¿No debería activarse el botón tan pronto como se ingrese texto en el campo? Aquí hay una solución que implementa esto.

enlace a otra solución: Keep button disabled if text is not entered

algo como esto:

$('.recipe-name').on("keyup", action); 
function action() { 
    if($('.recipe-name').val().length > 0) { 
     $('#submit-name').prop("disabled", false); 
    }else { 
     $('#submit-name').prop("disabled", true); 
    } 
}