Search code examples
jqueryjquery-selectors

jQuery calculate multiple text fields using a selector

Here a situation, I would like to calculate different text fields using a selector.

Here is an example of the form that I have...

    <input type="text" name="qtr1-revenue-month-1" id="qtr1-revenue-month-1" class="qtr-revenue editable" value="<?php echo $teamLeadMainForecast['qrt1Month1Revenue']; ?>" />
    <input type="text" name="qtr1-revenue-month-2" id="qtr1-revenue-month-2" class="qtr-revenue editable" value="<?php echo $teamLeadMainForecast['qrt1Month2Revenue']; ?>" />
    <input type="text" name="qtr1-revenue-month-3" id="qtr1-revenue-month-3" class="qtr-revenue editable" value="<?php echo $teamLeadMainForecast['qrt1Month3Revenue']; ?>" />

    <input type="text" name="qtr1-margin-month-1" id="qtr1-margin-month-1"  class="qtr editable margin" onblur="calculateQtrMonth.call(this,event)" value="<?php echo $teamLeadMainForecast['qrt1Month1Margin']; ?>" />
   <input type="text" name="qtr1-margin-month-2" id="qtr1-margin-month-2"  class="qtr editable margin" onblur="calculateQtrMonth.call(this,event)" value="<?php echo $teamLeadMainForecast['qrt1Month2Margin']; ?>" />
    <input type="text" name="qtr1-margin-month-3" id="qtr1-margin-month-3"  class="qtr editable margin" onblur="calculateQtrMonth.call(this,event)" value="<?php echo $teamLeadMainForecast['qrt1Month3Margin']; ?>" />

Here is what I'm looking to do.

When I make a change to the text field with id qtr1-margin-month-1 I want to have it multiply qtr1-margin-month-1 and qtr1-revenue-month-1.

How would I go about making the calculations using the jquery selector?

Thank you, Kevin

Solution

  • Consider the following.

    $(function() {
  $("input[id^='qtr1-margin-month']").change(function() {
    var $self = $(this);
    var idNum = $self.attr("id").substr(-1);
    var product = parseInt($self.val()) * parseInt($("#qtr1-revenue-month-" + idNum).val());
    alert(idNum + ": " + product);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="qtr1-revenue-month-1" id="qtr1-revenue-month-1" class="qtr-revenue editable" value="1000" />
<input type="text" name="qtr1-revenue-month-2" id="qtr1-revenue-month-2" class="qtr-revenue editable" value="2000" />
<input type="text" name="qtr1-revenue-month-3" id="qtr1-revenue-month-3" class="qtr-revenue editable" value="3000" />

<input type="text" name="qtr1-margin-month-1" id="qtr1-margin-month-1" class="qtr editable margin" value="10" />
<input type="text" name="qtr1-margin-month-2" id="qtr1-margin-month-2" class="qtr editable margin" value="45" />
<input type="text" name="qtr1-margin-month-3" id="qtr1-margin-month-3" class="qtr editable margin" value="75" />

    You can see here that this change callback will work for many of the Text Fields. It will find the relative field based on the ID, so for example, qtr1-margin-month-1 will look for qtr1-revenue-month-1.

    You can use blur event if you want, yet change might be better. It really depends on what you're doing.