Функция Jquery на заданной форме, когда много форм на моей странице

Question

У меня есть форма, которая много раз повторяется на моей странице (это на форуме). Я построил какую-то функцию jquery, которая в основном делает следующее:

когда выбрана опция ВЫБРАТЬ со значением «пользовательский»,

• скрыть выбор
• показать div с текстовой областью внутри и сфокусировать его

когда вход размыт и пуст

• скрыть ввод
• «сброс» выбора, показывая его и выбирая его значение по умолчанию (пустое значение)

Проблема в том, что я сделал это для ОДНОЙ формы на моей странице. И это работает. Но когда я попробовал это на тестовой странице нескольких форм, моя функция - скрыть выбор каждой формы - показать div с текстовой областью внутри и сфокусировать его на каждой форме.

Что, конечно, я не хочу делать.

Вопрос: как сделать эти функции специфичными для формы?

Вот мой код ниже.

Jquery

$("div[name=customInput]").hide();
$("select[name=motifs]").show();

$("select[name=motifs]").change(function () 
{
    if( $("select[name=motifs]").val() == "custom" )
    {   
        $("select[name=motifs]").hide();
        $("div[name=customInput]").show();
        $("textarea[name=customMotif]").focus();
    }
});
$("textarea[name=customInput]").blur ( function () 
{
    if( !$(this).val() ) 
    {
        $("div[name=customMotif]").hide();
        $("select[name=motifs]").show();
        $("select[name=motifs] option[name=motif]").attr("selected", "selected");
    }
});

$('textarea[name=customMotif]').keyup(function() {
            var len = this.value.length;
            if (len >= 150) {
                this.value = this.value.substring(0, 150);
            }
            $('span[name=charLeft]').text(150 - len);
});

HTML

<form action="note.php" method="post" name="notation" id="notation">
<select name="motifs">
        <option value="" name="void">Motif</option>
        <option value="custom" name="custom">Custom</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div name="customInput">
        <textarea cols="30" name="customMotif"/>
        </textarea>
        <span name="charLeft">150</span> Characters left </div>
</form>

Спасибо за вашу помощь; Я новичок и все еще учусь делать все правильно. Любая помощь приветствуется.

Answer 1

Примерно так должно работать:

$("select[name=motifs]").change(function () 
{
    if( $(this).val() == "custom" )
    {   
        var $parentForm=$(this).closest("form");

        $parentForm.find("select[name=motifs]").hide();
        $parentForm.find("div[name=customInput]").show();
        $parentForm.find("textarea[name=customMotif]").focus();
    }
});

closest получит ближайшего предка, который встречает селектор. В этом случае форма, в которой содержится выбор, содержится в. Затем, используя find, вы найдете селекторы только в родительской форме.

В качестве примечания, идентификаторы всегда должны быть уникальными.