Блог

Я пытаюсь изменить метку внутри повторителя в режиме реального времени на основе значения текстового поля, которое также находится внутри повторителя.

Я пытался использовать JS для решения этой проблемы, но не могу получить доступ ни к метке, ни к текстовому полю внутри повторителя.

У меня нет проблем с доступом к метке или текстовому полю, если оно находится за пределами повторителя

JS:

 <script language="javascript" type="text/javascript">
    document.getElementById('<%=labelToUpdate.ClientID%>').innerHTML = document.getElementById('<%=txtInput.ClientID%>').value;
</script>
  

ASPX:

 <asp:TextBox ID="txtInput" runat="server" class="form-control"></asp:TextBox>
<asp:Label ID="labelToUpdate" runat="server"></asp:Label>
  

Любая помощь всегда приветствуется.

Спасибо

Элементы управления Repeater находятся внутри ItemTemplate, поэтому вы не можете ссылаться на них напрямую. Вам нужно получить к ним доступ по индексу.

С помощью вашего метода вы могли бы сделать это

 document.getElementById('<%= Repeater1.Items[i].FindControl("labelTotalCsrPercentage").ClientID %>').innerHTML = 
   document.getElementById('<%= Repeater1.Items[i].FindControl("txtInput").ClientID %>').value;
  

Или это становится проще при использовании jquery. Затем вы можете использовать nth-of-type селектор

 $('#MyRepeater1 span:nth-of-type(2)').html($('#MyRepeater1 span:nth-of-type(2)').prev('input').val());
  

Для этого вам нужно обернуть Repeater элементом с уникальным идентификатором

 <span id="MyRepeater1">
    <asp:Repeater ID="Repeater1" runat="server">
    </asp:Repeater>
</span>
  

asp:repeater добавляет его id (и его родительские id элементы) перед элементами управления на уровне id элементов. Так что используйте эту идею. Поместите скрипт после повторителя.

 <script>
//language="javascript" is deprecated
//type="text/javascript" is default and cam be omitted
var txts = document.querySelectorAll('input[id$=txtInput]');
for(var i = 0, txt; txt = txts[i];   i){
    txt.addEventListener('change', function(){
      document.getElementById(this.id.replace('txtInput', 'labelToUpdate')).innerHTML = this.value;
      });
}
</script>
  

Вы также можете использовать jQuery, если это проще.