Using jQuery's .val() on multiple elements

Question

I am using jQuery's .val() to get the data from my amCharts period selector to a div on my page. It works, but only brings in one value. The .amChartsInputField has two input areas that contain text.

I have noticed on the jQuery documentation that .val() does only work with one element. Is there a way a way to tweak this to bring in multiple objects?

My script below:

jQuery:

chart1.addListener("rendered", function(e) {
  e.chart.periodSelector.addListener("changed", function() {
    var date = $(".amChartsPeriodSelector .amChartsInputField").val();
    $("#date-div p").text( date );
  }
}

HTML

<div id="date-div"><p>information pulled</p></div>

Your help is greatly appreciated.

Answer 1

You could collect all of the values into an array using jQuery's map() function:

// for each match, "map" the value into an array
var dates = $(".amChartsPeriodSelector .amChartsInputField").map(function() {
    return $(this).val();
}).get();

// join the values together and assign to the date-div
$("#date-div p").text(dates.join(', '));

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

<!-- made up HTML that fits your selectors -->
<div class="amChartsPeriodSelector">
  <input type="text" class="amChartsInputField" value="2014-10-10" />
  <input type="text" class="amChartsInputField" value="2015-11-10" />
</div>

<div id="date-div"><p></p></div>