Say we want to select these fields:
<input type="text" id="field_1" />
<input type="text" id="field_2" />
<input type="text" id="field_3" />We can select these with a jQuery selector easily:
$(document).ready(function() {
$('[id^=field_]')
.val('test');
});This would set the value for all fields to "test" that IDs begin with "field_", to set values for all fields with IDs ending with "_field" the syntax would be:
$('[id$=_field]')This example will loop through all links, get the ID integer and hide/show text fields with the corresponding ID below the links, here is the HTML:
<a href="#" id="link_1">Link 1</a><input type="text" id="field_1" /><br />
<a href="#" id="link_2">Link 2</a><input type="text" id="field_2" /><br />
<a href="#" id="link_3">Link 3</a><input type="text" id="field_3" /><br />Here is the code:
$(document).ready(function() {
// hide text fields
$('[id^=field_]')
.toggle();
// add click events so if links clicked it hides/shows its text field
$('[id^=link_]').each(function(index) {
$(this).click(function(event) {
event.preventDefault();
$('#field_' + $(this).attr('id').replace(/link_/, ''))
.slideToggle()
.focus();
});
});
});
