Is there a way to select an input of the parent form as a child with id specified?

Question

Hey guys, quick question,

I have an id that is applied multiple times on one of my pages (I used multiple duplicate ids because I also have a class applied that determines if the icon is a certain color rather than just duplicate the id css for each button color). I am using a jquery form handler that initiates on form submission and I would like to add an attribute to the submit button but since there is another button on the same page with the same id, I am having difficulty getting this to work. Is there a way to select an input by id of the parent form?

For example (I know it is wrong but it is what I want to achieve that matters in this example)

$("form#invite").submit(function() {


$(this).("#buttonid").attr({ disabled:true, value:"Sending..." });

Answer 1

This should do the trick.

$("form#invite").find("#buttonid").attr({ disabled:true, value:"Sending..." });

Answer 2

You should really try to find a way to keep the id's unique. Like using a classname or not naming them at all. In any case, here is the answer to you question:

$("form#invite").submit(function() {
    $(this).find("#buttonid").attr({ disabled:true, value:"Sending..." });
}

Answer 3

The id attribute must be unique in a HTML document. Multiple elements with the same ID will cause you no end of grief, more-so in some browsers than in others.

To answer your question, you can use find() or selector context:

// Selector context, supplying the current element as the second argument:
$("#buttonid", this).attr({ disabled:true, value:"Sending..." });

// find()
$(this).find("#buttonid").attr({ disabled:true, value:"Sending..." });