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

each radio has its own value?

yoda
– yoda

2009-10-05 14:47:58 +00:00
Commented Oct 5, 2009 at 14:47 — yoda
– yoda, Commented Oct 5, 2009 at 14:47

Roatin Marth · Accepted Answer · 2009-10-05 15:02:24Z

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 (".")

edited Oct 5, 2009 at 15:02

answered Oct 5, 2009 at 14:49

Roatin Marth

24.2k3 gold badges55 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vava Over a year ago

Sure but I bet OP have more than one (option, amount) pair :) You have to use $(this).next('.amount')

Roatin Marth Over a year ago

@vava: I bet you're right. However I answer questions as they stand, and this one doesn't mention multiple elements.

David Hamilton Over a year ago

I've adjusted my question for clarity. I have also adjusted my code to conform to proper naming convention. Thanks for pointing this out.

Greg · Accepted Answer · 2009-10-05 15:00:13Z

0

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

answered Oct 5, 2009 at 15:00

Greg

323k55 gold badges378 silver badges338 bronze badges

Comments

Seb Pollard · Accepted Answer · 2009-10-05 15:04:19Z

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

Richard · Accepted Answer · 2009-10-05 15:11:23Z

0

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 ")" );

answered Oct 5, 2009 at 15:11

Richard

2,0153 gold badges15 silver badges16 bronze badges

Collectives™ on Stack Overflow

Use jquery to get value of field with dynamically generated name

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related