Jquery for loop to set input value from selected option's attribute only changing last value

Question

I want to simplify this lump of code (it's actually much longer), which is working perfectly:

$(document).ready(function() {
  $("#PayRate1").change(function() {
           $('#HourlyRate1').val($('option:selected', this).data('rate'));
  });
  $("#PayRate2").change(function() {
           $('#HourlyRate2').val($('option:selected', this).data('rate'));
  });
  $("#PayRate3").change(function() {
           $('#HourlyRate3').val($('option:selected', this).data('rate'));
  });
  $("#PayRate4").change(function() {
           $('#HourlyRate4').val($('option:selected', this).data('rate'));
  });
  $("#PayRate5").change(function() {
           $('#HourlyRate5').val($('option:selected', this).data('rate'));
  });
  $("#PayRate6").change(function() {
           $('#HourlyRate6').val($('option:selected', this).data('rate'));
  });
  $("#PayRate7").change(function() {
           $('#HourlyRate7').val($('option:selected', this).data('rate'));
  });
});

So I made the following loop:

$(document).ready(function() {
    for(i=1;i<7;i++){
        $('#PayRate'+i).change(function() {
            $('#HourlyRate'+i).val($('option:selected', this).data('rate'));
          });
        }
});

However, when I select any option from the selects #PayRate1 through to PayRate6 they don't cause their corresponding #HourlyRate to change, but rather they all change #HourlyRate7. If I change #PayRate7 then nothing changes.

What is my error here? I'm pretty new to all this and it is my first attempt at writing a loop so knowing why my loop causes this problem would be very helpful to learn from.

EDIT:

Here is the html it is acting upon:

        <?php
        $numbers = range(1,14);
        foreach ($numbers as $number)
        {
          echo '<div class="row">';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Date'.$number.'" value="" name="Date'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Day'.$number.'" value="" name="Day'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <select name="PayRate'.$number.'" id=PayRate'.$number.'>';
          echo "      <option value='' disabled='disabled'>Select Rate</option>";
          echo "      <option data-rate='".$Rate1."' value='".$RateName1."'>".$RateName1."</option>";
          echo "      <option data-rate='".$Rate2."' value='".$RateName2."'>".$RateName2."</option>";
          echo "      <option data-rate='".$Rate3."' value='".$RateName3."'>".$RateName3."</option>";
          echo "      <option data-rate='".$Rate4."' value='".$RateName4."'>".$RateName4."</option>";
          echo '    </select>';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="RateValue" id="HourlyRate'.$number.'" name="HourlyRate'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Hours'.$number.'" name="Hours'.$number.'" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Overtime'.$number.'" name="Overtime'.$number.'" required="" aria-required="true">';
          echo '  </div>';
          echo '</div>';

      }
      ?>

There's a much better pattern to follow I'd like to recommend - do you have control over the HTML / markup? — random_user_name, Apr 29 '17 at 23:24
Possible duplicate of [Assign click handlers in for loop](http://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop) — billyonecan, Apr 29 '17 at 23:30

szegheo · Accepted Answer · 2017-04-30T00:06:44.923

Add a data attribute for storing its attached input element:

<input id="HourlyRate1" type="text" value="" />
<input id="HourlyRate2" type="text" value="" />
<select data-hr-id="HourlyRate1">
<select data-hr-id="HourlyRate2">

and in js

$(document).ready(function() {
    // get all select elements having our custom data attribute
    // then attach the change evenet listener on all of them
    $('select[data-hr-id]').change(function() {
       // the current select element who fired the this event
       var $sel = $(this);
       // the input we need to update
       var $inp = $('#'.concat($sel.attr('data-hr-id')));
       // get the selected option and use its data-rate attribute
       var val = $sel.find('option:checked').data('rate');
       // set it as the new value of our attached input element
       $inp.val(val);
    });
});

not tested, but should work.

EDIT: Simplified and comments added

This is quite a different way of doing it but I really like it and it has taught me a different way to approach such problems in the future. Thank you for taking the time. — Karumu, Apr 30 '17 at 00:22
You are welcome. If you are new to jQuery I recommend you learning form [this site](https://www.w3schools.com/jquery/default.asp) and from [jQuery API documentation](http://api.jquery.com/) — szegheo, Apr 30 '17 at 00:33

score 0 · Answer 2 · answered Apr 29 '17 at 23:38

0

When the 'change' event gets fired the loop has ended, so var i is 7.

You should store somewhere the i value.

I cannot test it right now but maybe you can do this:

$(document).ready(function() {
  for(var i = 1; i < 7; i++){
    $('#PayRate'+i).data('rateIndex', i);
    $('#PayRate'+i).change(function() {
      $('#HourlyRate' + $(this).data('rateIndex')).val($('option:selected', this).data('rate'));
    });
  }
});

answered Apr 29 '17 at 23:38

stravanato

146
6

This solution does work perfectly and helps me understand my error, thank you for that. If I could award 2 correct answers I'd give it to this also as this addressed my loop issue, however, ARS81's approach taught me another way altogether, which was very beneficial. I gave an upvote but being low reputation it doesn't show up publicly. – Karumu Apr 30 '17 at 00:25
@Karumu I agree that ARS81's is the right approach. – stravanato Apr 30 '17 at 22:05

Jquery for loop to set input value from selected option's attribute only changing last value

2 Answers2