Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Dan Oswalt
Dan Oswalt
23,438 Points

Count nonblank input fields and update text in submit button, using JQuery

Trying to use Jquery to automatically update the count of nonblank input fields and write it out within the the text of the submit button. My idea was to fire an event any time a key was pressed in an input field, but this doesn't give the number I'm expecting, it's always 10.

How can I get the number of nonblank input fields dynamically, so that as the user is typing into the inputs, the number of items to be sent is updated automatically within the text of the submit button?

$(document).ready( function() {

  $('input').keypress( function (e) {

    var nonblanks = $('.item[value!=""]').length;

    $('#submit-button').text('Send ' + nonblanks + ' items');

  });  

});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

      <form action="index.html" method="post">
        <h1>Enter 4 - 10 Items</h1>

        <input type="text" class="item" name="item1">
        <input type="text" class="item" name="item2">
        <input type="text" class="item" name="item3">
        <input type="text" class="item" name="item4">
        <input type="text" class="item" name="item5">
        <input type="text" class="item" name="item6">
        <input type="text" class="item" name="item7">
        <input type="text" class="item" name="item8">
        <input type="text" class="item" name="item9">
        <input type="text" class="item" name="item10">

        <button type="submit" id="submit-button"></button> 

      </form>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="jquery.js"></script>
</html>

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Dan,

This is what I came up with:

$(function() {
  /****************************************
      Variables
  ****************************************/

  var $inputFields = $("form input");
  var $submit = $("#submit-button");



  /****************************************
      Functions
  ****************************************/

  function generateSubmitMessage(n) {
    return "Send " + n + " items";
  }

  function updateButton() {    
    var items = 0;
    $.each($inputFields, function($field) {
      if ($inputFields[$field].value.length > 0) { ++items; }
    });    
    $submit.text(generateSubmitMessage(items));
  }



  /****************************************
      Event(s)
  ****************************************/

  $inputFields.on("keyup", function() {
    updateButton();
  });



  /****************************************
      Document On-Load
  ****************************************/

  $submit.text(generateSubmitMessage(0));
})
Dan Oswalt
Dan Oswalt
23,438 Points

Fantastic, this is exactly it. Thanks for this, this little snippet helped me wrap my head around several other questions I've had about JQuery as well.

One question: the parameter $field isn't a jquery object, right? It's just an integer? Why use a $ in front of the variable name?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Glad I could help!

Regarding $field, poor choice on my part. It would be better named as index or similar.