2016-12-27 1 views
1

J'ai 3 zones de texte avec un bouton de soumission que je voudrais activer seulement quand chacun des 3 textareas a du contenu. Voici ce que j'ai jusqu'à présent:Comment vérifier si une zone de texte est vide?

https://jsfiddle.net/2wkb9wmq/5/

HTML

<body> 
    <form> 
    <p>First</p> 
    <textarea name="first" id="first" cols="12" rows="2"></textarea> 
    <p>Second</p> 
    <textarea name="second" id="second" cols="12" rows="2"></textarea> 
    <p>Third</p> 
    <textarea name="third" id="third" cols="12" rows="2"></textarea> 
    <button type='button' disabled>Submit</button> 
    </form> 
</body> 

Jquery

$(document).ready(function() { 
    $('input[type="button"]').attr('disabled', true); 
    $('textarea').on('keyup',function() { 

     $("textarea").each(function() { 

     if ($(this).val() != "") { 

      $('input[type="button"]').attr('disabled', false); 

     } else { 

      $('input[type="button"]').attr('disabled' , true); 
     } 
     });  
    }); 
    }); 

Répondre

1

Vous devez utiliser une variable et définir, si un textarea n'est pas rassasiée:

$(document).ready(function() { 

    var button = $('button'); 
    var textareas = $('textarea'); 

    textareas.on("keyup", function() { 
    var disabled = false; 
    textareas.each(function() { 
     if (!$.trim($(this).val())) { 
     disabled = true; 
     } 
    }); 
    button.attr('disabled', disabled); 
    });  

}); 

En outre, j'utiliserais !$.trim($(this).val()) pour vérifier si le textare est vide. Cela interdit également les chaînes vides. Si les chaînes vides sont autorisées, vérifiez uniquement !$(this).val().

Votre jsfilddle mis à jour est ici: https://jsfiddle.net/2wkb9wmq/8/