jQuery selection with dynamic id's.

Question

I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.

How can I select each set of inputs and apply code to each one?

I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.

<form method='POST'>
    <label for="id_airline_for_8">Airline</label>:
    <input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/>
    <label for="id_flight_number_for_8">Flight Number</label>:
    <input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/>

    <label for="id_airline_for_17">Airline</label>:
    <input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/>
    <label for="id_flight_number_for_17">Flight Number</label>:
    <input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/>

    -- snip --

</form>

EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.

To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).

Answer 1

You can use $("input#id_airline_for" + id) (where id is your number, e.g., 8), but it will be faster if you drop the tag name and just use:

$("#id_airline_for" + id);

Answer 2

The following will get you all of the inputs that contain id_airline_for in their name.

$("input[id^='id_airline_for']")

If you need to do this on a per form basis, you'll want to give each form its own ID and select them in groups that way.

$("#formJetBlue input[id^='id_airline_for']")
$("#formNwa input[id^='id_airline_for']")
$("#formOceanic input[id^='id_airline_for']")

Answer 3

$("input[id^='id_airline_for_']").each(function() {
  var id = parseInt(this.id.replace("id_airline_for_", ""));
  var airline = $("#id_airline_for_" + id), flightNumber = $("#id_flight_number_for_" + id);
  // do stuff with airline and flightNumber <input>s
});

Answer 4

I don't think you should be using the @ sign and you're missing some quotes:

Instead of this: $('input[id^=@id_airline_for_]')

try this: $("input[id^='id_airline_for_']")

See this, too:

http://docs.jquery.com/Selectors/attributeStartsWith#attributevalue

Answer 5

How change Middle ID number plase????

Answer 6

Selects elements that have the specified attribute with a value containing the a given substring

$('input[id *= id_airline_for]').attr('checked', headerChecked);

it will select all elements that contain 'id_airline_for' string in the 'id' attribute