CODEWITHSUNDEEP
jqueryforms
Saulius s
Saulius s

Reputation: 601

If input field is empty, disable submit button

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

Upvotes: 27

Views: 129048

Answers (6)

Haneen Khairi
Haneen Khairi

Reputation: 1

$(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>

Upvotes: 0

Marcelo Machado
Marcelo Machado

Reputation: 1397

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' ... >

Upvotes: 3

jkras
jkras

Reputation: 324

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

Upvotes: 1

Adil
Adil

Reputation: 148120

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

Upvotes: 80

Akbar
Akbar

Reputation: 101

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>

Upvotes: 3

Nalaka526
Nalaka526

Reputation: 11464

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){

Upvotes: 11

Related Questions