Rails 和 jQuery：如何从特定表单中选择输入答案

【问题标题】：Rails and jQuery: How to select input from a specific formRails 和 jQuery：如何从特定表单中选择输入
【发布时间】：2013-06-05 19:14:38
【问题描述】：

我有一个带有作业模型的 Rails 应用程序，在索引页面上，每个作业都有一个表单。每次选择提交按钮时，我都需要能够访问特定的表单，因此我可以获取表单的输入并使用它执行一些 jQuery 验证。

这是我的一些 index.html 页面。

<ul>
  <% @unassigned.each do |job| %>
    <li>
            <div class="row new-message">
              <div class="small-12 columns">
                  <%= form_for @message do |f| %>
                    <%= f.text_area :body, {placeholder: 'enter a new message...'} %>
                    <%= f.hidden_field :job_id, value: job.id %>
                    <%= f.submit 'send message', class: 'button small radius secondary message-button', "data-job-id" => job.id %>
                    <div id="message<%= i %>-validation-errors"> </div>
                  <% end %>
              </div>
            </div>
    <li>
  <% end %>
<ul>

这是我尝试从特定表单中选择输入的 javascript/jQuery

var messages;

messages = function() {

    $('.message-button').click(function(e) {
        var id = $(this).data('job-id');
        messageValidation(e, id);
    });

    function messageValidation(e, id) {
        var body = $('#message_body').val();
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

$(document).ready(messages);

索引页面将为每个作业提供一个表单，我希望有一个前端验证来检查按钮何时提交，body 字段不为空。第一次工作正常，但在返回索引页面并尝试第二次验证var body = $('#message_body').val(); 似乎总是空的，无论我是否在正文中放入任何东西。我相信这与以下事实有关，因为每个工作都有相同的表格，同一页面上有多个#message_body id，它选择了不正确的一个。我是 jQuery 和 javascript 的新手，有人可以帮助我吗

【问题讨论】：

标签： javascript jquery ruby-on-rails-3 forms

【解决方案1】：

一个页面上不能有多个具有相同 id 的元素。您可以为这些元素添加一个class 标识符。

在您的情况下，将 class="message_body" 简单地设置为您的元素并选择它们，如下所示：

$('.message-button').click(function(e) {
    var id = $(this).data('job-id');
    var body = $(this).parent().find('.message_body').val();
    messageValidation(e, body, id);
});

【讨论】：

我在当前解决方案之前尝试过这个，这确实选择了一个表单，但它总是选择第一个表单。
它只会选择包含被点击按钮的表单。
每当我尝试这样做并将var id = $('#message_job_id').val(); 放入messageValidation 方法时，无论我点击哪个表单提交按钮，id 总是以'1' 出现
我相信会发生这种情况是因为页面上有很多'#message_job_id' id，并且每次运行时都会选择它看到的第一个。有没有办法从被点击的特定表单中选择正确的输入
$('#message_job_id') 将始终选择与选择器 #message_job_id 匹配的第一个元素。所以不要一般地使用选择器。相对于您单击的按钮使用它。

【解决方案2】：

为了解决这个问题，我需要选择表单的子表单并通过它找到message_body。

messages = function() {

    $('.new_message').submit(function(e) {
        //var id = $(this).data('job-id');
        var $this = $(this);
        var body = $this.children('#message_body').val();
        var id = $this.children('#message_job_id').val();
        messageValidation(e, body, id);
    });

    function messageValidation(e, body, id) {
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

【讨论】：