Question

我正在使用jquery表单插件（http://jquery.malsup.com/form/）在页面上显示已提交表单的结果。我遇到的问题是，每页有多个表单，并在div中显示该特定表单的结果。

这是表单代码：

<form class="contest-rating-form" id="contest-rating-1" name="Contest" method="post" action="/">    
<input type="hidden" name="rating" value="1">
<input type="submit" name="submit" value="Vote"></p>
</form>
<div class="message"></div>

注意id =“contest-rating-1” - 页面上的每个表单都有一个唯一的＃，因此可能有id =“contest-rating-55”和id =“contest-rating-100”等

这是我的JS：

<script>
$(document).ready(function() { 
  var options = {
   target: '.message', 
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

.message通过响应进行更新，但更新了.message的每个实例，而不仅仅是该表单的实例。

感谢您提供任何帮助！

编辑添加：我也可以将相同的＃添加到.message，以便.message-1匹配＃contest-rating-1等等。只是不确定如何在JS中动态地为每个表单工作

Answer 1

如果您以.php的身份运行该页面，则可以动态地将唯一的类名称插入到“message”div中。

Answer 2

没有尝试过，但在那里可能有一些this的引用，如果.message元素在.contest-rating-form内，也许这样的东西会起作用：

$(document).ready(function() { 
  $(".contest-rating-form").submit(function() { 
      $(this).ajaxSubmit({ target: $('.message', this), success: showResponse });
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}

这取决于插件的编写方式？

如果标记不同，您必须爬上DOM才能找到.message并引用.contest-rating-form。尝试检查AjaxSubmit站点以获取有关如何执行此操作的一些线索？

Answer 3

假设您的message元素始终位于表单元素之后，您可以将代码更改为以下内容：

<script>
$(document).ready(function() { 
  var options = {
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      options.target = $(this).next(".message");
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

这种方式options.target将始终指向提交表单下方的消息元素。

Answer 4

这是一种方法可能会帮助您获得轴承，并且在为多个实例实现certian类型的插件时总是很方便。

/* loop over each form to insulate context in the $.each loop 
   and provide for index avaliablity*/

$(".contest-rating-form").each(function( index ){

        var $form=$(this);                              

        var options={       

            /* can now use indexing if wanted*/
           target: '#message_'+index, 

           /* or traverse within form*/        
           target : $form.find('.message'), 


           success: showResponse
        }; 

      $form.submit(function() { 
          $form.ajaxSubmit(options); 
          return false; 
      }); 

})

AJAX表单 - 返回成功/失败消息（每页多个表单）

4 个答案: