How do I bind my range slider input field value to the correct input field in my html table?

Question

I am using Django formsets.

I have a range slider inside my html table body. When I move the slider, it updates the last text box in the table correctly (using javascript to do that). What I would like it to do is for the first slider to update the first text box, the second to update the second text box and so on.

This is what my html tbody looks like

             <tbody class="product-instances">
             {% csrf_token %}
             {{ evawform.management_form }}
                  {% for form in evawform %}
                  {{ form.id }}
                    <tr>
                        <td>{{form.criterion}}</td>
                        <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value);"></td>
                        <td><input type="text" id="textinput{{forloop.counter}}" value="1"></td>
                        <td>{{form.updated_by}}</td>
                    </tr>
               {% endfor %} 
              </tbody>

This is what my javascript function looks like.

     function updateTextInput(val) {
         document.getElementById('textinput{{forloop.counter}}').value = val;
     }      

Could you please help me out? Thanks!

Answer 1

The copypasta method to do this would be two versions of updateTextInput(val) that each update a separate id 'textinput{{forloop.counter}}' , but a better method would be to add a second parameter.

 <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value,'textinput1{{forloop.counter}}');"></td>
 <td><input type="text" id="textinput1{{forloop.counter}}" value="1"></td>
 <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value,'textinput2{{forloop.counter}}');"></td>
 <td><input type="text" id="textinput2{{forloop.counter}}" value="1"></td>

with the following update to your helper function:

function updateTextInput(val,id) {
     document.getElementById(id).value = val;
 }