Comment puis-je désactiver le bouton d'envoi jusqu'à ce que le texte soit entré dans le champ de saisie?

Question

J'ai un problème essayez d'atteindre ce résultat, à peu près ce dont j'ai besoin est de désactiver le bouton d'envoi jusqu'à ce que le texte est entré dans le champ de saisie. J'ai essayé quelques fonctions mais sans résultats. S'il vous plaît, si vous pouvez m'aider avec ceci, ce serait vraiment apprécié.

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> 

Merci à l'avance.

Answer 1

Vous pouvez utiliser ceci:

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

Voir en jsfiddle.

Answer 2

appel javascript fonction comme ci-dessous (par exemple pour donner jquery) en onkeyup événement

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

Vous pouvez essayer ceci:

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

Le seul problème avec la solution accpeted est que le bouton est activé uniquement après mise au point est retiré du champ de texte (après la saisie des données en elle bien sûr). Le bouton ne devrait-il pas être activé dès qu'un texte est entré dans le champ? Voici une solution qui implémente cela.

Lien vers une autre solution: Keep button disabled if text is not entered

quelque chose comme ceci:

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