I want to find the sum of first few text fields values with dynamically ordered class names in a DOM using jQuery.

For example:

    <input type="text" >
    <input type="text" >

    <input type="text" >
    <input type="text" >

    <input type="text" >
    <input type="text" >

    <input type="text" >
    <input type="text" >
    <input type="text" >

how to do select the sum of first two text field values with class name starting with abc? Thanks for the help

CodePudding user response：

You could do it like this:

$('[class^="abc"]').on("input", function() {
  var n = $('[class^="abc"]').map(function() {
    return $(this).val().match(/^\d $/) ?  $(this).val() : 0
  }).get().reduce((pv, cv) => {
    return pv   (parseFloat(cv) || 0);
  }, 0)
  console.log(n)
});

This will get all the values where the value is a number and multiply them.

Demo

$('[class^="abc"]').on("input", function() {
  var n = $('[class^="abc"]').map(function() {
    return $(this).val().match(/^\d $/) ?  $(this).val() : 0
  }).get().reduce((pv, cv) => {
    return pv   (parseFloat(cv) || 0);
  }, 0)
  console.log(n)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" >
<input type="text" >

<input type="text" >
<input type="text" >

<input type="text" >
<input type="text" >

<input type="text" >
<input type="text" >
<input type="text" >

CodePudding user response：

It will get the first two input fields you can do anything in the body of function.

count=0;
$("input").each(function () {
    if($(this).attr(class).substr(0,3) == "abc") {
        $(this).val();
    
        count  ;
        if(count > 1) {
            return;
        }
    }
});

CodePudding user response：

Using vanilla JS, it will only get the values from the first 3 (few) inputs as per your question

// Update function runs when initiated then every time an input is updated
// Just outputs the total to innerHTML of #calcTotal
const update = () => {
  total.innerHTML = `Total: ${values.reduce((sum, a) => sum   a, 0)}`
};

const total = document.getElementById('calcTotal')
const holder = document.getElementById('calcInputs');
const inputs = Array.from(holder.children);

// Empty array to update with for lopp below
const values = [];

// For the first 3 items in inputs[]
for (let i = 0; i < 3; i  ) {
  // Push input value into values[]
  values.push(parseFloat(inputs[i].value))
  
  // Event listener updates value in array every time input is changed
  inputs[i].addEventListener('change', (event) => {
    values[i] = parseFloat(inputs[i].value);
    update();
  })
};

update();

body { font-family: sans-serif; margin: 0; }
* { box-sizing: border-box }

#calcInputs { display: flex; flex-wrap: wrap; }
input { margin: 0.5rem; width: calc( (100% / 3) - 1rem ); }

input:nth-of-type(-n 3) {
 color: red;
 font-weight: 900;
}

#calcTotal {
  margin: 0.5rem;
  font-size: 1.25rem;
  font-weight: 900;
}

<div id="calcInputs">
  <input type="number"  value="10">
  <input type="number" value="25">

  <input type="number"  value="7">
  <input type="number"  value="99">

  <input type="number"  value="2">
  <input type="number"  value="5">

  <input type="number"  value="401">
  <input type="number"  value="62">
  <input type="number"  value="63">
</div>

<div id="calcTotal">Total</div>