jQuery array of inputs, add values

jquery get input array value by index
jquery add to array
assign array value to textbox jquery
jquery get value from array of objects
how to store textbox value in array in javascript
jquery append value to input field
assign array to input value jquery
jquery map

Consider dozens of input like the ones bellow. I need do subtract GLOSA and add AJUSTE from VALAUT and put the result in APAGAR, in each line individually, as the user type new values in GLOSA and AJUSTE.

<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text"   id="glosa[]"  name="glosa[0]"  value="10" />
<input type="text"   id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text"   id="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text"   id="glosa[]"  name="glosa[1]"  value="0" />
<input type="text"   id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text"   id="apagar[]" name="apagar[1]" value="0" />

I´ve tryed many approaches, like this http://jsfiddle.net/rve232g8/ , but did not succeeded.

Does anyone can help?


You can use jQuery wildcard as the selector.

$('[name^=glosa], [name^=ajuste]').bind("change keyup input", function() {
  //Get the group number
  var group = $(this).attr('name').match(/\[(.*?)\]/)[1];

  //Get the values
  var valaut = $('[name="valaut[' + group + ']"]').val();
  var glosa = $('[name="glosa[' + group + ']"]').val();
  var ajuste = $('[name="ajuste[' + group + ']"]').val();

  //Check if number
  if (!isNaN(valaut) && !isNaN(glosa) && !isNaN(ajuste)) {

    //Calculate apagar 
    var apagar = Number(valaut) - Number(glosa) + Number(ajuste);

    //Set value for apagar
    $('[name="apagar[' + group + ']"]').val(apagar);
  } else {
    //Some input non numbers. Clear the apagar
    $('[name="apagar[' + group + ']"]').val("");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="valaut[]" name="valaut[0]" value="100" />
<input type="text" id="glosa[]" name="glosa[0]" value="10" />
<input type="text" id="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" id="apagar[]" name="apagar[0]" value="0" />
<br/><br/>
<input type="hidden" id="valaut[]" name="valaut[1]" value="200" />
<input type="text" id="glosa[]" name="glosa[1]" value="0" />
<input type="text" id="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" id="apagar[]" name="apagar[1]" value="0" />

.map(), Hi guys, I have an array form input with an id: field[0], field[1] etc. How can I set the value of each array element directly? Im rookie in jQuery and i have a big problem ( for me ) How can i check multiple part value and price values in the table ? Also how to code it How to get values from inputs ( array ) - jQuery Forum


In both solutions, by @Edie and @Takit Isy I got the exact result I needed. Thank you very much!

Setting value of an input array using jquery - JavaScript, Im try to use the click function on the add button to display input text that is transposed onto the b array. Whenever I click the add button though, I get an  That's my point. The question asks how to put the values in to an array. This only loops through the found elements and shows the value in an alert. It also needlessly retrieves the Element object from a jQuery object, in order to create another jQuery object to get the value – Rory McCrossan Nov 26 at 11:34


Here is a working snippet, using jQuery, which should fulfills your needs: (See the comments in my snippet)

// Update function
function update() {
  var valaut, glosa, ajuste;
  // For each "apagar", do the following:
  $('input[name^=apagar]').each(function(index) {
    // Get values
    valaut = $('input[name^=valaut]')[index].value;
    glosa = $('input[name^=glosa]')[index].value;
    ajuste = $('input[name^=ajuste]')[index].value;
    // Store the result (calculation using unary operator)
    $(this).val(+valaut - +glosa + +ajuste);
  });
}

// Launch function on load
update();
// Bind update function on inputs changes
$('input[name^=glosa], input[name^=ajuste]').on('keyup', update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="valaut[]" name="valaut[0]" value="100" disabled/>
<input type="text" class="glosa[]" name="glosa[0]" value="10" />
<input type="text" class="ajuste[]" name="ajuste[0]" value="5" />
<input type="text" class="apagar[]" name="apagar[0]" value="0" />
<br/>
<input type="text" class="valaut[]" name="valaut[1]" value="200" disabled/>
<input type="text" class="glosa[]" name="glosa[1]" value="0" />
<input type="text" class="ajuste[]" name="ajuste[1]" value="0" />
<input type="text" class="apagar[]" name="apagar[1]" value="0" />
<br />
<p><u>Comments:</u><br /> Changed id to class in the inputs, as ids must be unique.<br /> Removed "hidden" and added "disabled" to see the "valauts" for testing.</p>

Adding input text to array and using jquery to display array text , Write a JavaScript program to add items in an blank array and display getElementById("text1").value; alert("Element: " + array[x] + " Added at  jQuery get values from inputs and create an array. to iterate over the elements and add the names and values to a map Getting array of values from jQuery


JavaScript array: Add items in a blank array and display the items , here https://api.jquery.com/val/ when using .val(arr), where arr is an array, I'd expect each <input> to have value "1" but instead, they have  When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option. As of jQuery 3.0, if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null.


Set value to textbox array using jquery, The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/​or  Data from file select elements is not serialized. Elements that do not contain a value attribute are represented with the empty string value. This method can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>.


.val(Array) does not assign values from array to different elements , How to put a responsive clear button inside HTML input text field ? There is a Input Element, the task is to set its value using JQuery. Here are a few examples​  The push() method adds new items to the end of an array, and returns the new length. Note: The new item(s) will be added at the end of the array. Note: This method changes the length of the array. Tip: To add items at the beginning of an array, use the unshift() method.