Question

我正在使用Ruby on Rails从具有多个输入文本或选择字段的表单填充数据库。我正在使用AJAX，因此每次用户在任何输入字段中进行更改时，都会自动考虑所有输入字段值，并刷新其他一些结果字段。

使用以下脚本为前2个输入字段一切正常，但我计划有50多个输入字段（如果不是更多），我想知道是否有更智能的方法来实现我的脚本而不明确定义单独的每个领域的功能。

我很感激如何扩展我的脚本而不重复同样的事情50次？

这是我的js

<script type="text/JavaScript">
$(function(){
    $('.input_1_class').bind('change', function(){
        $.ajax({
            url: "<%= update_fields_projects_url %>",
            data: {
                input_1: $('.input_1_class').val(),
                input_2: $('.input_2_class').val(),
            }
        });
    });
    $('.input_2_class').bind('change', function(){
        $.ajax({
            url: "<%= update_fields_projects_url %>",
            data: {
                input_1: $('.input_1_class').val(),
                input_2: $('.input_2_class').val(),
            }
        });
    });
});
</script>

这是我的Ruby形式（简化）

<%= form_for(@project, :html => {:name => "ProjectInfo"}) do |f|
  field_set_tag "Customer Information" do %>

    <div class="field">
      <%= f.label :"Input 1" %>
      <%= f.text_field :Input_1, {:class=>"input_1_class"} %>
      <%= f.label :"Input 2" %>
      <%= f.text_field :Input_2, {:class=>"input_2_class"} %>
      <%= f.label :"Output 1" %>
      <%= f.text_field :Output_1, {:id=>"output_1_id"} %>
    </div>
  <% end %>
<% end %>

Answer 1

为什么不做以下事情：

$("form input").bind("change", function() {
  var $form = $(this).closest("form");
  var data = {};
  $.each($form.serializeArray(), function(i, v) { data[v.name] = v.value; });
  $.ajax({
    url: $form.data('refresh'),
    data: data
  });
});

您的表单需要数据刷新属性：

<%= form_for(@project, :html => {:name => "ProjectInfo", :data => {:refresh => update_fields_projects_url}}) do |f|

这样，您的AJAX事件处理程序不必具有其正在操作的表单的特定知识 - 您只需将其绑定到具有数据刷新属性的表单，并且每当它将表单的数据发布到该URL时表单中的字段会发生变化。

Answer 2

您可以指定多个选择器，并将相同的事件绑定到所有选择器：

$('.input_1_class, .input_2_class').click(function ()
{
    alert('Bound to both inputs');
});

javascript如何将多个表单字段的更改绑定到同一个函数中？

2 个答案: