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

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');
});