CODEWITHSUNDEEP
javascriptjquerytextarea
joe.dev
joe.dev

Reputation: 115

Disable / Enable button when the text and textarea are empty

I have this code that disable the button when the text is empty, but I have a textarea html code. How can I include this that when the text and textarea are both empty the button will be disabled and when both are filled it enables. I tried the code below and it works on text only. Any ideas?

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled', false);
        } else {
            $('input[type="submit"]').attr('disabled', true);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />

Upvotes: 5

Views: 22574

Answers (8)

sunitkatkar
sunitkatkar

Reputation: 2086

I needed a solution where there are 2 text fields and a Submit button. The business logic was that the user should type in a value in any one of the text fields at a minimum to enable the Submit button.

Here is my solution which I used in my code. It is not the best/optimal solution possibly but it did the job. Do comment if you have a better way.

//Enable Submit button for search only on text input

$(".inputFieldCSSClass").on('keyup', function(){
     var isEmpty = !($.trim($("#inputText1").val()).length > 0 || 
                     $.trim($("#inputText2").val()).length > 0);
      $("#btnSubmit").prop('disabled', isEmpty);
 });

Upvotes: 0

Ufenei augustine
Ufenei augustine

Reputation: 51

The selected answer does the job but it is not enough. A text area and text field filled with spaces ( pressing the space bar several times) will enable the submit button.

You therefore need to apply $.trim() to the values from these fields before passing them to the if statement as shown below

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

$('input[type="text"],textarea').on('keyup',function() {
    var textarea_value = $.trim($("#texta").val());
    var text_value = $.trim($('input[name="textField"]').val());

    if(textarea_value != '' && text_value != '') {
        $('input[type="submit"]').attr('disabled', false);
    } else {
        $('input[type="submit"]').attr('disabled', true);
    }
});
});

Upvotes: 0

rynhe
rynhe

Reputation: 2529

You miss the textarea selector in jQuery

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    
    $('input[type="text"],textarea').on('keyup',function() {
        var textarea_value = $("#texta").val();
        var text_value = $('input[name="textField"]').val();
        
        if(textarea_value != '' && text_value != '') {
            $('input[type="submit"]').attr('disabled', false);
        } else {
            $('input[type="submit"]').attr('disabled', true);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="textField" /><br>
<textarea rows="4" cols="30" id="texta"></textarea><br>
<input type="submit" value="next" />

Upvotes: 9

Jawwad Ali Khan
Jawwad Ali Khan

Reputation: 17

<input type="text" name="textField" />
<textarea rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />

<script type="text/javascript">
    $(document).ready(function() {
        $('input[type="submit"]').attr('disabled', true);
        $('input[type="text"],textarea').on('keyup',function() {
        var textarea_value = $("#texta").val();
        var text_value = $('input[name="textField"]').val();

        if(textarea_value != '' && text_value != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
        });

    });
</script>

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

You can do this using the .prop() method like:

// Cache the elements first
var $text = $('input[type="text"]');
var $textarea = $('textarea');
var $submit = $('input[type="submit"]');

// Set the onkeyup events
$submit.prop('disabled', true);
$text.on('keyup', checkStatus);
$textarea.on('keyup', checkStatus);

// Set the event handler
function checkStatus() {
    var status = ($.trim($text.val()) === '' || $.trim($textarea.val()) === '');
    $submit.prop('disabled', status);
}

F.Y.I.

As mentioned in the .prop() API Documentation:

Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

FIDDLE DEMO

Upvotes: 3

mehmetakifalp
mehmetakifalp

Reputation: 455

I think you have to check space.

$("textarea").on('mouseout', function(){
  if (!$.trim($("textarea").val())) {
    alert("empty");
 }
});

test it : http://jsfiddle.net/mehmetakifalp/ef5T9/

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

use prop

$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],textarea ').on('keyup',function() {
    if($(this).val()) {
        $('input[type="submit"]').prop('disabled' , false);
    }else{
        $('input[type="submit"]').prop('disabled' , true);
    }
});

by attr we can do by 

 $('input[type="submit"]').attr('disabled', 'disabled');
    $('input[type="text"],textarea ').on('keyup',function() {
        if($(this).val()) {
            $('input[type="submit"]').removeAttr('disabled');
        }else{
            $('input[type="submit"]').attr('disabled','disabled');
        }
    });

see .prop() vs .attr()

Upvotes: 0

themightysapien
themightysapien

Reputation: 8369

Just check both input feild and textarea. For that you can bind the both fields to keyup event and check the value

$('input[type="submit"]').prop('disabled', true);
$("#yourtextfield,#yourtextarea").on("keyup","#parentdiv",function(){
if($("#yourtextfield").val() == '' || $("#yourtextarea").val() == ''){
   $('input[type="submit"]').prop('disabled' , true);
   }
else{
   $('input[type="submit"]').prop('disabled' , false);
   }
})

Upvotes: 0

Related Questions