Organizational Research By

Surprising Reserch Topic

jquery disable enable submit button


jquery disable enable submit button  using -'javascript,jquery,html,forms'

I have this html:

<input type="text" name="textField" />
 <input type="submit" value="send" />


How can I do something like this:


When the text field is empty the submit should be disabled (disabled="disabled").
When something is typed in the text field to remove the disabled attribute.
If the text field becomes empty again(the text is deleted) the submit button should be disabled again.


I tried something like this:

$(document).ready(function(){
     $('input[type="submit"]').attr('disabled','disabled');
     $('input[type="text"]').change(function(){
            if($(this).val != ''){
               $('input[type="submit"]').removeAttr('disabled');
            }
     });
 });


..but it doesn't work. Any ideas? Thanks.
    

asked Sep 9, 2015 by rajesh
0 votes
31 views



Related Hot Questions

9 Answers

0 votes

The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:

$(document).ready(function() {
     $('input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $('input[type="submit"]').prop('disabled', false);
        }
     });
 });
answered Sep 9, 2015 by rajesh
0 votes
$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}
answered Sep 9, 2015 by rajesh
0 votes

This question is 2 years old but it's still a good question and it was the first Google result ... but all of the existing answers recommend setting and removing the HTML attribute (removeAttr("disabled")) "disabled", which is not the right approach. There is a lot of confusion regarding attribute vs. property.

HTML

The "disabled" in in the markup is called a boolean attribute by the W3C.

HTML vs. DOM

Quote:

A property is in the DOM; an attribute is in the HTML that is parsed into the DOM.

a/7572855/664132

JQuery

Related:

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property...

Relevant:

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method.

$( "input" ).prop( "disabled", false );

Summary

To [...] change DOM properties such as the [...] disabled state of form elements, use the .prop() method.

(http://api.jquery.com/attr/)


As for the disable on change part of the question: There is an event called "input", but browser support is limited and it's not a jQuery event, so jQuery won't make it work. The change event works reliably, but is fired when the element loses focus. So one might combine the two (some people also listen for keyup and paste).

Here's an untested piece of code to show what I mean:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});
answered Sep 9, 2015 by rajesh
0 votes

you can also use something like this :

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

here is Live example

answered Sep 9, 2015 by rajesh
0 votes

eric, your code did not seem to work for me when the user enters text then deletes all the text. i created another version if anyone experienced the same problem. here ya go folks:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})
answered Sep 9, 2015 by rajesh
0 votes

To remove disabled attribute use,

 $("#elementID").removeAttr('disabled');

and to add disabled attribute use,

$("#elementID").prop("disabled", true);

Enjoy :)

answered Sep 9, 2015 by rajesh
0 votes

Here's the solution for file input field.

To disable a submit button for file field when a file is not chosen, then enable after the user chooses a file to upload:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>
answered Sep 9, 2015 by rajesh
0 votes

The answers above don't address don't address also checking for menu based cut/paste events. Below's the code that I use to do both. Note the action actually happens with a timeout because the cut and past events actually fire before the change happened, so timeout gives a little time for that to happen.

  $( ".your-input-item" ).bind('keyup cut paste',function() {
      var ctl = $(this);
      setTimeout(function() {
          $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
      }, 100);
  });
answered Sep 9, 2015 by rajesh
0 votes

If the button is itself a jQuery styled button (with .button()) you will need to refresh the state of the button so that the correct classes are added / removed once you have removed/added the disabled attribute.

$( ".selector" ).button( "refresh" );
answered Sep 9, 2015 by rajesh

...