Button disable unless both input fields have value

Question

I have a form with two input fields and a submit button on my page, I would like to have the feature that the 'submit' button is disabled until there are values on both two input fields. That's the button will be clickable if and only if there are values input in both fields.

How to implement this with js and jQuery?

Here is my page:

<html>
<body>
    <form method=post>
        <input type=text id='first_name'>
        <input type=text id='second_name'>
        <input type=submit value=Submit>
    </form>
</body>
</html>

I would like to have both js and jQuery solution

davehauser · Answer 1 · 2011-03-10T10:36:00.743

6

Here's a solution using jQuery:

HTML (note that I added a id to the submit button):

<form method=post>
    <input type="text" id="first_name">
    <input type="text" id="second_name">
    <input type="submit" value="Submit" id="submit" disabled>
</form>

JavaScript/jQuery:

$(':text').keyup(function() {
    if($('#first_name').val() != "" && $('#second_name').val() != "") {
       $('#submit').removeAttr('disabled');
    } else {
       $('#submit').attr('disabled', true);   
    }
});

Working example: http://jsfiddle.net/nc6NW/1/

edited Mar 10 '11 at 10:36

answered Mar 09 '11 at 15:44

davehauser

5,844
4
30
45

But after I filled both fields, I have to click somewhere else to enable the button, the button is not active automatically. – Mellon Mar 10 '11 at 06:14
You're right, I just updated the solution and changed `.change(function()...` to `.keyup(function()...`. This should work now. The jsfiddle example is also updated. – davehauser Mar 10 '11 at 10:37

score 3 · Answer 2 · edited May 23 '17 at 11:50

3

JQuery: jQuery disable/enable submit button

Pure JS:

<html>
<body>
    <form method="POST" 
     onsubmit="return this.first_name.value!='' && this.second_name.value!=''">
        <input type="text" id="first_name" name="first_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.second_name.value==''">
        <input type="text" id="second_name" name"second_name"
        onkeyup="this.form.subbut.disabled = this.value=='' || this.form.first_name.value==''">

        <input type="submit" value="Submit" disabled="disabled">
    </form>
</body>
</html>

edited May 23 '17 at 11:50

Community

1
1

answered Mar 09 '11 at 15:41

mplungjan

169,008
28
173
236

Thank you, how about do it in pure jQuery? – Mellon Mar 09 '11 at 15:43
@Mellon Please see updates. Your jQuery question is a duplicate – mplungjan Mar 09 '11 at 15:46
I think you forgot to give the name for submit button. It should be Am I right? – prodeveloper Sep 08 '15 at 01:26

score 1 · Answer 3 · answered Mar 09 '11 at 15:45

Don't forget the name property for your form fields!

<html>
<head>
<script type="text/javascript" src="path.to/jquery.js" />
<script type="text/javascript">
$(function() { // on document load

   var fn = function() {
      var disable = true;
      $('#myForm input[type:text]').each(function() { // try to find a non-empty control
          if ($(this).val() != '') {
             disable = false;
          }
      });

      $('#myForm input[type:submit]').attr('disabled', disable);
   }

   $('#myForm input[type:text]').change(fn); // when an input is typed in
   fn(); // set initial state
});
</script>
<body>
    <form id="myForm" method="POST">
        <input type="text" id="first_name">
        <input type="text" id="second_name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

score 1 · Answer 4 · answered Mar 09 '11 at 15:50

$(function(){
  $("#first_name, #second_name").bind("change keyup",
  function(){
     if($("#first_name").val() != "" && $("#second_name").val() != "")
        $(this).closest("form").find(":submit").removeAttr("disabled");
     else
        $(this).closest("form").find(":submit").attr("disabled","disabled"); 
  });
});

Button disable unless both input fields have value

4 Answers4

Linked