Используйте jquery для получения значения поля с динамически генерируемым именем

Question

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

Сгенерированные поля соединены с использованием уникального идентификационного номера. Пример:

переключатель с именем option_3030 Будет иметь поле сумма_3030

Число динамически создаваемых полей также неизвестно (может быть одна или десять входных пар - все с именами option_xxxx и amount_xxxx.

То, что я пытаюсь сделать, это использовать jquery для установки значения поля 3030_amount, когда опция 3030_option отмечена (или не отмечена). Проблема в том, что я не знаю заранее, каким будет действительный номер идентификатора.

Есть предложения?

Спасибо

David

Answer 1

Один из вариантов - использовать классы:

<input type="radio" id="3030_Option" class="option" />
<input type="text" id="3030_amount" class="amount" />

<script>
$(function() {
    $('.option').click(function() {
         $(this).next('.amount').val('new value goes here')
    })
})
</script>

Кстати, запуск html идентификаторов с номерами технически недопустим

Жетоны ID и NAME должны начинаться с буква ([A-Za-z]) и может сопровождаться по любому количеству букв, цифр ([0-9]), дефисы ("-"), подчеркивание ("_"), двоеточия (":") и точки (".")

Answer 2

Ммм, я думаю, вы могли бы попытаться зарегистрировать функцию javascipt при создании кода. Я сделал что-то похожее с gridview.

generatedControl.Attributes.Add("onchange", "jqueryFunction(" generatedId ")" ); 

Answer 3

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

<input type="radio" id="3030_Option" class="option" />
<input type="text" id="3030_amount" class="amount" />
<input type="radio" id="3031_Option" class="option" />
<input type="text" id="3031_amount" class="amount" />


$('.option').click(function() {
    var id = $(this).attr('id');
    var num = id.substring(0, id.indexOf('_'));
    $('#' + num + '_amount').val('value');
});

Как отмечают другие, цифры не действительны в качестве начального символа идентификатора. Было бы лучше, чтобы суффикс их. В этом случае код необходимо немного изменить.

<input type="radio" id="Option_3030" class="option" />
<input type="text" id="amount_3030" class="amount" />
<input type="radio" id="Option_3031" class="option" />
<input type="text" id="amount_3031" class="amount" />

$('.option').click(function() {
    var id = $(this).attr('id');
    var num = id.substring(id.indexOf('_') + 1, id.length);
    $('#amount_' + num).val('value');
});

Answer 4

Вы можете получить атрибут id и взять из него номер:

$('input[type=radio]').change(function()
{
    var id = this.id.split(/_/)[1];
    var amount = $('input[name=amount_' + id + ']');
    amount.val(123);
}