I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Question

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is known as Block Time.

In my form design, there are provisions for users to input details for up to 8 Sectors. However, I face a challenge with displaying the total number of only filled out sectors before hitting the submit button. This can be achieved by having the field labeled # of Sectors show the count of completed sectors by identifying how many fields marked with the 'Calctime' class are not empty. Notably, all fields designated as Block Time have the 'Calctime' class associated with them.

To provide further insight, you can view the form layout featuring 8 Sectors.

The function I have created to address this issue seems to be returning the total number of fields (8) instead of just the count of filled-up fields. The function script in question:

function sectors(){
 var items = [...document.querySelectorAll('.calctime')]; //demo to count number of empty
 document.getElementById('sector').value = items.length
 }

javascript html css

Answer 1

Answer №1

You can loop through the form fields to verify their contents.

function checkFields(){
 var elements = [...document.querySelectorAll('.calctime')]; //example to calculate number of empty fields
 let filledCount=0;
 elements.forEach(element => {
     if(element.value) filledCount++;
 })
 document.getElementById('sector').value = filledCount;
}

Answer 2

You can loop through the form fields to verify their contents.

function checkFields(){
 var elements = [...document.querySelectorAll('.calctime')]; //example to calculate number of empty fields
 let filledCount=0;
 elements.forEach(element => {
     if(element.value) filledCount++;
 })
 document.getElementById('sector').value = filledCount;
}

Answer 3

Answer №2

To ensure all input fields are filled, adding a placeholder (even a blank one) is recommended. Utilize

querySelectorAll('element:not(:placeholder-shown))

to target unfilled inputs effectively.

Including a placeholder is not only beneficial for usability but also essential for accessibility purposes.

// function to count filled inputs
function countFilledInputs() {
  let filled_inputs = document.querySelectorAll('input.calctime:not(:placeholder-shown)');
  console.log(filled_inputs.length);
}


// eventListeners for demo purposes
window.addEventListener('DOMContentLoaded', countFilledInputs);
const INPUTS = document.querySelectorAll('input.calctime');
INPUTS.forEach(input => input.addEventListener('change', countFilledInputs));

<input class="calctime" placeholder="">
<input class="calctime" placeholder="">

Answer 4

To ensure all input fields are filled, adding a placeholder (even a blank one) is recommended. Utilize

querySelectorAll('element:not(:placeholder-shown))

to target unfilled inputs effectively.

Including a placeholder is not only beneficial for usability but also essential for accessibility purposes.

// function to count filled inputs
function countFilledInputs() {
  let filled_inputs = document.querySelectorAll('input.calctime:not(:placeholder-shown)');
  console.log(filled_inputs.length);
}


// eventListeners for demo purposes
window.addEventListener('DOMContentLoaded', countFilledInputs);
const INPUTS = document.querySelectorAll('input.calctime');
INPUTS.forEach(input => input.addEventListener('change', countFilledInputs));

<input class="calctime" placeholder="">
<input class="calctime" placeholder="">

Answer 5

Answer №3

if you are looking to filter a list based on values present, you can utilize the array.property.filter method. Below is an example:

 button.addEventListener('click',()=>{
   let items = [...document.querySelectorAll('.calctime')];  
   const button = document.getElementById('button')
   items = items.filter((item) => !!item.value )

   document.getElementById('sector').value = items.length
 })

<div>
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
</div>
<div>
  <input type="text" id="sector" readonly />
  <button id="button">button</button>
</div>

Answer 6

if you are looking to filter a list based on values present, you can utilize the array.property.filter method. Below is an example:

 button.addEventListener('click',()=>{
   let items = [...document.querySelectorAll('.calctime')];  
   const button = document.getElementById('button')
   items = items.filter((item) => !!item.value )

   document.getElementById('sector').value = items.length
 })

<div>
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
  <input type="text" class="calctime" />
</div>
<div>
  <input type="text" id="sector" readonly />
  <button id="button">button</button>
</div>

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to retrieve the size of a three.js group element?

"Enhancing security measures with multiple nonce for Content Security Policy

Tips for automatically expanding all nodes with children when the page loads in the Wix Angular tree control

What is the best way to create an image in the shape of a perfect circle?

Cannot get Firebase's set() method to work when called within onAuthStateChanged() function

Transform the array of objects into different clusters

A website with two distinct pages, where only the first page is refreshed

When making a jQuery + AJAX request, IE8 is causing a null return value

Sending data over a network using Socket and node.js

Retrieve all the records from the collection that have a specific reference number in their ID field

Achieve the effect of "background-attachment: fixed" using a div element

Ways to link a Javascript or Jquery function to an HTML form

Using the scroll feature within the tooltip component in React with @material-ui/core/Tooltip can cause the entire page to

Customize your website with eye-catching full width colored blocks using Bootstrap 3

Tips for ensuring that images fully occupy my carousel slides

Challenge implementing custom javascript to display categorical/string features on Shiny slider

Executing a RESTful API request with Mocha in a Node.js environment

Trouble with implementing a stationary header for a table on IE9?

What advantages can be gained by opting for more precise module imports?

How can I divide a div by utilizing word wrap?