JQuery Syntax, with .val(""); (returning array)

Question

I am quite new to Jquery, so I am a bit confused as to how I can perform what is described below...

What I am trying to do:

1. Search through the entire page for input textboxes that have the word Rate and then again for Quantity.

2. Do a calculation, Sum of (Rate * quantity)

3. Present the result to the user.

What I have done

1. Because the rows are added dynamically there are GUIDs in the elements name, so I search for them.

Where I need help

I can extract the value using the .val("") command, but I am confused the syntax as to how I could perform the steps i need to.

Here is what I have:

  $("#alertButton").live("click", function () {
                var rateValues = $('input[name*="Rate"]').val("");
                var qtyValues = $('input[name*="Qty"]').val(""); 

                           //how do i handle it here

            });

This is what the one of the rate textboxes is rendered like in html (there may be 0 to many of these, as they are dynamically added to the page)

<input type="text" value="0" style="width: 100%;" name="JobDetails[dd1c94e5-5e83-4a92-b5c4-0a5aea0eb5df].Rate" id="JobDetails___randomNumber___Rate" data-val-required="The Rate (Exl GST) field is required." data-val-number="The field Rate (Exl GST) must be a number." data-val="true">

Answer 1

When you pass an argument to ".val()" — even the empty string — you set the value of the <input>. You get the value with ".val()" (no parameters), but that only gets the value of the first matched element.

What you may want, overall, is to use ".map()":

var rateValues = $('input[name*="Rate"]').map(function() {
  return this.value;
});
var qtyValues = $('input[name*="Qty"]').map(function() {
  return this.value;
});

That'll give you arrays with the values and quantities. You could return something else if you also wanted the "id" or "name":

var rateValues = $('input[name*="Rate"]').map(function() {
  return { value: this.value, name: this.name };
});

Then you'd have an array of objects.

Answer 2

To retrieve a value, you have to use .val() (no quotes). You're actually SETTING those fields' values to be an empty string.

Since you say there could be more than one pair of those fields, you'll have to actually loop over the search results, retrieve each pair's value, then calculate. Right now, you're applying that val to ALL matching inputs.

var rateValues = $('input[name*="Rate"]').val();
var qtyValues = $('input[name*="Qty"]').val(); 
$(rateValues).each(function(i, val) {
     // val is rateValues[i]
     qty = qtyValues[i];
     ... do your calculations
});