Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery selection with dynamic id's

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

like image 376
ashchristopher Avatar asked Jan 02 '09 23:01

ashchristopher


3 Answers

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);
like image 81
Sophie Alpert Avatar answered Oct 16 '22 21:10

Sophie Alpert


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']")
like image 2
Beau Simensen Avatar answered Oct 16 '22 21:10

Beau Simensen


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

like image 2
rp. Avatar answered Oct 16 '22 22:10

rp.