Question

我正在使用Django formsets。

我的html表体内有一个范围滑块。当我移动滑块时，它会正确更新表格中的最后一个文本框（使用javascript来执行此操作）。我想要做的是第一个滑块更新第一个文本框，第二个滑块更新第二个文本框等等。

这就是我的html tbody的样子

             <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>

这就是我的javascript函数。

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

你可以帮帮我吗？谢谢！

Answer 1

执行此操作的copypasta方法是updateTextInput(val)的两个版本，每个版本都更新一个单独的ID 'textinput{{forloop.counter}}'，但更好的方法是添加第二个参数。

 <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>

对您的帮助函数进行以下更新：

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

如何将我的范围滑块输入字段值绑定到我的html表中的正确输入字段？

1 个答案: