Question

我正在尝试使用jquery在具有多个表单的php页面上定位特定的表单元素。表单是动态生成的，包含在while循环中。表单是位于单个帖子下的评论表单，每个帖子包含三个帖子。

由于表单和表单字段是动态生成的，我需要使用类名而不是id。但是，为了区分每个表单，我可以为每个表单附加一个id以区分它们，但id将是一个基于post id的整数。这是我的表单结构：

    <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

$(this)会提供用户提交的表单。
$(this).parent()将为该元素的父级提供（在您的情况下，周围的div包含类cform）。
$(this).parent().find()将仅返回与提供的CSS样式选择器匹配的div的子孙，孙子等。

所以对于微调器的淡入/淡出：

// 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')）。

使用PHP和Jquery在具有多个表单的页面上定位特定表单

2 个答案: