Ориентация на конкретную форму на странице с несколькими формами с использованием PHP и Jquery

Question

Я пытаюсь настроить таргетинг на конкретный элемент формы на странице php, которая имеет несколько форм с jquery. Формы генерируются динамически и содержатся в цикле while. Эти формы являются формами комментариев, которые находятся под отдельным сообщением, содержащим три сообщения на странице.

Поскольку поля формы и формы генерируются динамически, мне нужно использовать имена классов, а не идентификаторы. Однако, чтобы различать каждую форму, я могу прикрепить идентификатор к каждой форме, чтобы дифференцировать их, но идентификатор будет целым числом, основанным на идентификаторе записи. Вот моя структура формы:

    <div class="cform" id="'.$id.'">
     <form action="" method="" enctype="" class="vidcomfrm" name="'.$id.'">
        <h3>Add Comment to '.$title.' video</h3>
        <div class="row">
          <label><span class="label">Your Name:</span>
          <input name="name" class="vname" id="'.$id.'" type="text"  value=""/>
          </label>
          <label><span style="margin-left:.5em; width:75px;">Email:</span>
          <input name="email" class="vemail" id="'.$id.'" type="text"   value="" />
          </label>
        </div>
        <div class="row">
          <label><span class="label">Comments:</span>
          <textarea name="comments_body" class="vcomments" id="'.$id.'" rows="2" class="formw" /></textarea>
          </textarea>
          </label>
        </div>
        <div class="row">
          <input type="hidden" name="vid" value="'.$id.'" />
        </div>
                  <input name="submit" type="submit" value="Add Comment" class="comment_submit" id="'.$id.'" />
      </form>
          <ul class="response" id="'.$id.'" /><!--success or failure message goes here -->
    </div><!--/cform div-->

А вот код Jquery, который я использую

    $(function() {
            $('form.vidcomfrm').submit(function(event) {
                    event.preventDefault(); // stop the form submitting
                    $('div.cform').append('<img src="../images/pageElements/ajax-loader.gif" class="loaderIcon" alt="Loading..."/>');//this will            simulate processing by loading an animated gif
                    var data = $(this).serialize(); // $(this) represents the form object
                    $.post('../Scripts/processVidcoms.php', data, function(results) {
                        $('div.cform img.loaderIcon').fadeOut(1000);//fade out processing simulation image
                        $('ul.response').html(results);//display succcess or failure errors.
            //clear the form data
            $('.vname').val('');
            $('.vemail').val('');
            $('.vcomments').val('');
                    });

        });             
    });

Когда пользователь отправляет форму, действие кнопки «Отправить» по умолчанию блокируется, и processVidcoms.php вступает во владение, выполняя проверку формы, вставляя комментарий в таблицу комментариев и возвращая успешное сообщение или сообщение об ошибке. Это сработало отлично.

Проблема с результатами ответа и ajax-loader.gif. когда пользователь нажимает кнопку добавления комментария, ajax-loader.gif и ответ появляются под каждой формой! Я хочу, чтобы ответ возвращался только в той форме, которую нажимает пользователь. Я перепробовал все способы, используя $ (this) и указав переменные, но лучшее, что я могу сделать, то, чего я смог достичь, это выше.

Используя приведенный выше код jquery для запуска, как я могу изменить его для нацеливания на конкретную форму?

Спасибо!

Answer 1

1. $(this) даст форму, которую отправил пользователь.
2. $(this).parent() даст родителя этого элемента (в вашем случае,окружающий div с классом cform).
3. $(this).parent().find() вернет только тех детей, внуков и т. д., которые соответствуют предоставленному селектору в стиле CSS.

Так что для постепенного исчезновения / вращения счетчика:

// Fade in
$(this).parent().append('<img src="../images/pageElements/ajax-loader.gif" class="loaderIcon" alt="Loading..."/>');

// Fade out
$(this).parent().find('img.loaderIcon').fadeOut(1000);

Чтобы показать ответ:

$(this).parent().find('ul.response').html(results);

Для сброса полей формы:

$(this).parent().find('.vname').val('');
$(this).parent().find('.vemail').val('');
$(this).parent().find('.vcomments').val('');

Редактировать: Исправлена ​​проблема с вышеуказанным кодом..children опускается только на один уровень, поэтому я исправил код, чтобы вместо него использовать .find.

Answer 2

$(this).parent() должен дать вам ссылку на <div>, который вам нужен (вместо $('div.cform')).