If input field is empty, disable submit button

Question

I'm trying to disable submit button if the user hasn't provided any text.

At first sight it looks that everything works just fine, but if user types some text, then deletes it, the submit button becomes enabled.

Here is my code:

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

What about attacks? using enable and disable attributes are not secure....Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty. — Elnaz
– Elnaz, Commented Sep 26, 2016 at 6:47
@Elnaz indeed, so you still need to include the appropriate checks in your backend. Still, this is useful as a UI improvement. On another note, keyup would not be my first choice. What if a user cuts the text? .on('input', ... is probably a better choice. — savx2
– savx2, Commented Feb 3, 2017 at 16:24

Adil · Accepted Answer · 2014-07-17 03:14:01Z

80

You are disabling only on document.ready and this happens only once when DOM is ready but you need to disable in keyup event too when textbox gets empty. Also change $(this).val.length to $(this).val().length

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

Or you can use conditional operator instead of if statement. also use prop instead of attr as attribute is not recommended by jQuery 1.6 and above for disabled, checked etc.

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method, jQuery docs

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

edited Jul 17, 2014 at 3:14

answered Jul 17, 2013 at 11:54

Adil

148k25 gold badges217 silver badges207 bronze badges

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

3 Comments

Lucas Haas Over a year ago

How to do that with multiple id elements? for example #name, #email, #message

Luis Lopez Over a year ago

If you use values for the inputs, the last won't work.

Oddacon Over a year ago

i found the paragraph about using the DOM very helpful. as developers it can be confusing to know these things. very well done!

Nalaka526 · Accepted Answer · 2013-07-17 12:05:23Z

11

Try this code

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);

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

Check demo Fiddle

You are missing the else part of the if statement (to disable the button again if textbox is empty) and parentheses () after val function in if($(this).val.length !=0){

edited Jul 17, 2013 at 12:05

answered Jul 17, 2013 at 11:59

Nalaka526

11.5k21 gold badges86 silver badges119 bronze badges

1 Comment

Sameer Over a year ago

Note: if you use arrow function for keyup, it won't work.

Akbar · Accepted Answer · 2013-07-17 12:43:10Z

Please try this

<!DOCTYPE html>
<html>
  <head>
    <title>Jquery</title>
    <meta charset="utf-8">       
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
  </head>

  <body>

    <input type="text" id="message" value="" />
    <input type="button" id="sendButton" value="Send">

    <script>
    $(document).ready(function(){  

      var checkField;

      //checking the length of the value of message and assigning to a variable(checkField) on load
      checkField = $("input#message").val().length;  

      var enableDisableButton = function(){         
        if(checkField > 0){
          $('#sendButton').removeAttr("disabled");
        } 
        else {
          $('#sendButton').attr("disabled","disabled");
        }
      }        

      //calling enableDisableButton() function on load
      enableDisableButton();            

      $('input#message').keyup(function(){ 
        //checking the length of the value of message and assigning to the variable(checkField) on keyup
        checkField = $("input#message").val().length;
        //calling enableDisableButton() function on keyup
        enableDisableButton();
      });
    });
    </script>
  </body>
</html>

Marcelo Machado · Accepted Answer · 2016-12-19 17:58:23Z

3

An easy way to do:

function toggleButton(ref,bttnID){
    document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}


<input ... onkeyup="toggleButton(this,'bttnsubmit');">
<input ... disabled='disabled' id='bttnsubmit' ... >

edited Dec 19, 2016 at 17:58

answered Feb 18, 2014 at 15:54

Marcelo Machado

1,4692 gold badges17 silver badges36 bronze badges

Comments

jkras · Accepted Answer · 2016-11-28 15:08:14Z

1

For those that use coffeescript, I've put the code we use globally to disable the submit buttons on our most widely used form. An adaption of Adil's answer above.

$('#new_post button').prop 'disabled', true
$('#new_post #post_message').keyup ->
    $('#new_post button').prop 'disabled', if @value == '' then true else false
    return

answered Nov 28, 2016 at 15:08

jkras

3242 silver badges5 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-05-17 17:06:27Z

0

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

.btn{
    color:red;
    background-color:black;
    width:100px;
    padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<form>
    <input type="text" name="email" id="message1">
    <input type="text" name="name" id="message">
    <button class="btn sendValueButton" type="submit">send</button>
</form>

edited May 17, 2022 at 17:06

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered May 17, 2022 at 12:40

Haneen Khairi

1

2 Comments

Lee Taylor Over a year ago

Please don't just a code-only answer. Describe the problem that you have solved.

Haneen Khairi Over a year ago

The code is the solution for the bug! This code will disable the button if the field still empty, so you can use it to disable the button and able it when all the fields filled.

Collectives™ on Stack Overflow

If input field is empty, disable submit button

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related