Question

I am creating a plugin for jQuery to create pretty select boxes (I know there are some out there, but this is learning experience for me).

If all goes well I realease the plugin to the public, so I am trying to build it as flexible as possible, and for this reason I am struggling to select the parent form element that houses the select that I am trying to target. Regardless of how a user sets up there HTML, I want to be able to select the parent form element.

Below is my HTML,

    <div class="grid_6 alpha quick_search">
        <h3>Quick Search Talent</h3>
        <form action="http://urbantalent.tv.local/search/quick" method="post" accept-charset="utf-8" class="quick_form"><div style="display:none">
            <input type="hidden" name="csrf_urbantalent" value="a8db11249b37322da84d3a211a933b19" />
</div>
            <div class="formRow drop_down">
                <select name="type">
                    <option value="0" selected="selected">I'm looking for...</option>
                    <option value="1">actors</option>
                    <option value="2">presenters</option>
                    <option value="3">voice overs</option>
                </select>
             </div>
            <button type="submit" name="submit_search"><img src="http://urbantalent.tv.local/media/images/site/quick_submit.png" /></button>
        </form>
    </div>

As you can see from this HTML the selects parent is actually, .formRow how can I select the just the parent form, I have tried doing this,

$(this).parent('form') however this doesn’t work as we know that form is not actually the parent.

Answer 1

You need this:

$(this).closest("form")

jQuery reference: http://api.jquery.com/closest/