Counting inputs with values on change using jquery

Question

Why doesn't this work? It tells me I have 1 input with a value on loading, which is correct. But if I add or remove a value, it still says I have 1 input with a value.

<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

alert($('#myForm input[type=text][value!=""]').length);

$('#myForm input[type=text]').change(function(){
    alert($('#myForm input[type=text][value!=""]').length);
})

});
</script>
</head>

<body>
<div id="myForm">
   <input type="text" value="foo" name="f1">
   <input type="text" value="" name="f2">
</div>
</body>

FIDDLE

Pranav C Balan · Accepted Answer · 2016-05-06 10:56:17Z

2

You are selecting element which have attribute value equals ''(empty string) , the attribute value is not changing it's just updating it's value property of the dom object. So use filter() for filtering based on updated value

<head>
  <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  </script>
  <script>
    $(document).ready(function() {

      alert($('#myForm input[type=text][value!=""]').length);

      $('#myForm input[type=text]').change(function() {
        alert($('#myForm input[type=text]').filter(function() {
          return this.value == '';
        }).length);
      })

    });
  </script>
</head>

<body>
  <div id="myForm">
    <input type="text" value="foo" name="f1">
    <input type="text" value="" name="f1">
  </div>
</body>

edited May 6, 2016 at 10:56

answered May 6, 2016 at 10:43

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

1 Comment

Pranav C Balan Over a year ago

@user1001421 : glad to help :)

Collectives™ on Stack Overflow

Counting inputs with values on change using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related