jQuery - Selector for duplicate ID's

Question

I have a page with duplicate ID\'s for a form element. The catch is I the elements show up separately based on a toggle. So both ID\'s never show up simultaneously.

Answer 1

as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.

Then you can do

alert($('.my_element:visible').val());

Answer 2

try :hidden

   $("#my_element").find(":hidden").val();

Elements can be considered hidden for several reasons:

They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.

NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,

Answer 3

Do not use same id for multiple elements, classes are better!

Answer 4

The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.

In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.

Since you're using jQuery, I'd highly recommend using classes for this instead.

Answer 5

Avoid duplicates ids on the page. It is not a valid HTML.

Answer 6

As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.