Use jquery to get value of field with dynamically generated name

Question

I have a form with field names that are generated dynamically by server side code. I am attempting to allow JQuery to manipulate the value of these fields, but am running into trouble.

The generated fields are paired using a unique ID number Example:

A radio button named option_3030 Will have a amount_3030 field

The number of dynamically created fields is also an unknown (there might be one or ten input pairs -- all named option_xxxx and amount_xxxx.

What I'm trying to do is use jquery to set the value of the 3030_amount field when the 3030_option is checked (or unchecked). The problem is, I don't know ahead of time what the actual id number will be.

Any suggestions?

Thanks,

David

Answer 1

One option is to use classes:

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

By the way starting html ids with numbers is technically not allowed:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

Answer 2

You can grab the id attribute and take the number from it:

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

Answer 3

If you bind your event with a class, and then parse the id of the clicked element to get the numerical identifier to use for the text field.

<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');
});

As pointed out by others, numerals are not valid as the initial character of an id. It would be better to suffix them. In which case the code needs modifying slightly.

<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

Mhh i think you could try to register the javascipt function while generating the code. I have done somthing similar with a gridview.

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