If input field is empty, disable submit button v2

Question

In my websites I tried these 2 codes:

$(document).ready(function(){
    $('.sendButton').attr('disabled', true);
    $('#message').keyup(function() {
        if ($(this).val().length != 0)
            $('.sendButton').attr('disabled', false);            
        else
            $('.sendButton').attr('disabled',true);
    })
});

Then I tried this one:

$(document).ready(function(){
    $('.sendButton').prop('disabled', true);
    $('#message').keyup(function(){
        $('.sendButton').prop('disabled', this.value == "" ? true : false);     
    })
});

How can I edit either of those so that my button isn't disabled when the only thing you do is right click paste in the textarea (#message)? With those codes it only works if you initially click it. I want the button to be disabled if there is no text in textarea, but at the same time I want it be enabled if it has text but there hasn't been an initial left click. Ie. the only thing you do when the page loads is right click, paste, then click button (and it should work).

Thanks in advance!

PS: both codes come from this topic: If input field is empty, disable submit button

Try binding to the onChange event instead of keyup.

Joey
– Joey

2016-05-11 15:17:41 +00:00
Commented May 11, 2016 at 15:17 — Joey
– Joey, Commented May 11, 2016 at 15:17
Here's the rest of the code ? textarea (#message)

Pedro Lobito
– Pedro Lobito

2016-05-11 15:41:43 +00:00
Commented May 11, 2016 at 15:41 — Pedro Lobito
– Pedro Lobito, Commented May 11, 2016 at 15:41

kWeglinski · Accepted Answer · 2016-05-11 15:20:00Z

1

You can use .change() event handler. It will be dispatched when input value will be changed. So when somebody just pastes on the field it will be changed so you'll get your action.

$( ".target" ).change(function() {
   alert( "Handler for .change() called." );
});

answered May 11, 2016 at 15:20

kWeglinski

4114 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Austin Over a year ago

I'm afraid I cannot interpret your answer since i'm a newbie with code. would you mind helping me out? this is the code I wrote in this forum, but modified for my page: <script type="text/javascript"> $(document).ready(function(){ $('.submit').prop('disabled', true); $('#link').keyup(function(){ $('.submit').prop('disabled', this.value == "" ? true : false); }) }); </script>

kWeglinski Over a year ago

Here, I've provided you with codepen, but changed it a bit (not using .change()) codepen.io/anon/pen/xVBMWP please be advised it does not work with IE <9. here is js code $('input.writeme').on('input',function(e){ $('.readme').text($('.writeme').val()) }); and here is html

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script> <input type="text" class="writeme" placeholder="write here"/> <div class="readme">Here you'll see changes</div>

Rajeesh Madambat · Accepted Answer · 2016-05-11 15:42:54Z

0

Try this...

$(document).ready(function(){

$(document).ready(function(){
    $('.sendButton').prop('disabled', true);
    $('#message').on('input',function(){    

        $('.sendButton').prop('disabled', this.value === "");     
        })
}); 

});

Extending to the above code, if any browser having paste issues use input propertychange paste rather input

answered May 11, 2016 at 15:42

Rajeesh Madambat

3,8311 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

If input field is empty, disable submit button v2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related