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 · Accepted Answer · 2011-03-10 10:36:00Z

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, 2011 at 10:36

answered Mar 9, 2011 at 15:44

davehauser

5,9724 gold badges32 silver badges45 bronze badges

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

2 Comments

Mellon Over a year ago

But after I filled both fields, I have to click somewhere else to enable the button, the button is not active automatically.

davehauser Over a year ago

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.

mplungjan · Accepted Answer · 2024-03-30 06:49:36Z

4

JQuery: jQuery disable/enable submit button

Pure JS:

Event listener version

window.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('myForm');
  // this is a little overkill 
  form.addEventListener('submit', (e) => {
    let name1 = form.first_name.value.trim();
    let name2 = form.second_name.value.trim();
    if (name1 === "" || name2 === "") e.preventDefault(); // stop submission
  });
  form.addEventListener('input', (e) => {
    let name1 = form.first_name.value.trim();
    let name2 = form.second_name.value.trim();
    document.getElementById('subbut').disabled = name1 === "" || name2 === "";
  });
});

<form method="POST" id="myForm">
  <input type="text" id="first_name" name="first_name" />
  <input type="text" id="second_name" name "second_name" />
  <input id="subbut" type="submit" value="Submit" disabled="disabled" />
</form>

HTML only version

<form method="POST">
  <input type="text" id="first_name" name="first_name"  required />
  <input type="text" id="second_name" name "second_name"  required />
  <input name="subbut" type="submit" value="Submit" />
</form>

edited Mar 30, 2024 at 6:49

answered Mar 9, 2011 at 15:41

mplungjan

180k29 gold badges183 silver badges246 bronze badges

3 Comments

Mellon Over a year ago

Thank you, how about do it in pure jQuery?

mplungjan Over a year ago

@Mellon Please see updates. Your jQuery question is a duplicate

prodeveloper Over a year ago

I think you forgot to give the name for submit button. It should be <input type="submit" value="Submit" disabled="disabled" name="subbut"> Am I right?

Lightness Races in Orbit · Accepted Answer · 2011-03-09 15:45:18Z

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>

Quincy · Accepted Answer · 2011-03-09 15:50:36Z

1

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

answered Mar 9, 2011 at 15:50

Quincy

4,4433 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

Button disable unless both input fields have value

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related