Enable submit button if input and checkbox aren't empty

Question

Below I am trying to ensure that my checkbox and inputs are all filled before allowing user to submit. It ignores my check on the checkbox and opens up the submit after the fields only are filled. What am I doing wrong?

$('#first, #last, #pass').bind('keyup', function() {
    if (allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
    var filled = true;

    console.log($('#checkbox').prop('checked'))

    $('body input').each(function() {
       if ($(this).val() == '' && $('#checkbox').prop('checked') == false)  filled = false;
    }); 

    return filled
};

html:

<body>
  <form>
    Username
    <br />
    <input type="text" id="first" name="first" />
    <br /> First
    <br />
    <input type="text" id="last" name="last" />
    <br /> Last
    <br />
    <input type="text" id="pass" name="pass" />
    <br /> Password
    <br />
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
    <br />
    <input type="submit" id="register" disabled value="Register" />
  </form>
  <div id="test">
  </div>
</body>

Seeing your HTML would be useful. minimal reproducible example. You should also be using .on() instead of .bind() — j08691
– j08691, Commented Dec 27, 2016 at 18:22
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. — Zakaria Acharki
– Zakaria Acharki, Commented Dec 27, 2016 at 18:23
Possible duplicate of How do I check if a checkbox is checked in jQuery? — Arpit Solanki
– Arpit Solanki, Commented Dec 27, 2016 at 18:26
@ZakariaAcharki that was indeed my problem if you answer i'll vote you correct — caro
– caro, Commented Dec 27, 2016 at 18:26
Your checkbox don't have value attribute <input type="text" id="pass" name="pass" value="" /> — Ivijan Stefan Stipić
– Ivijan Stefan Stipić, Commented Dec 27, 2016 at 18:30

Zakaria Acharki · Accepted Answer · 2016-12-27 18:30:26Z

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

Please don't use the deprecated method bind() use on() instead :

$('#first, #last, #pass').on('keyup', function() {
    if (allFilled()) $('#register').removeAttr('disabled');
});

Hope this helps.

$('#first, #last, #pass').on('keyup', function() {
  if (allFilled()) $('#register').removeAttr('disabled');
});

function allFilled() {
  var filled = true;

  $('body input').each(function() {
    if ($(this).val() == '' && $('#checkbox').prop('checked') == false)  filled = false;
  }); 
  return filled
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Username
  <br />
  <input type="text" id="first" name="first" />
  <br /> First
  <br />
  <input type="text" id="last" name="last" />
  <br /> Last
  <br />
  <input type="text" id="pass" name="pass" />
  <br /> Password
  <br />
  <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" />
  <br />
  <input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>

Collectives™ on Stack Overflow

Enable submit button if input and checkbox aren't empty

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related