在表单提交时将 Javascript 数组发送到 ruby 控制器

Sending Javascript array to ruby controller on form submit

本文关键字：ruby 控制器 数组 表单提交 Javascript      更新时间：2023-09-26

我有一个带有提交按钮的表单<%= f.submit "Create Meeting", class: "btn-submit" %>该按钮将收集到的信息发送到事件控制器中的events#create操作。

我希望能够在提交表单中的其余信息的同时将 javascript/JQuery 数组idList发送到控制器操作。我将如何做到这一点？我知道它涉及一个 AJAX 函数，但我不知道什么时候调用它。我必须覆盖Javascript中的提交函数吗？如果是这样，如何完成？

以下是我创建表单的方式：

<%= form_for(@newevent) do |f| %>
  ...
  <%= f.submit "Create Meeting", class: "btn-submit" %>
<% end %>

这是我提交的控制器操作：

def create
  @calendar = current_customer.calendar
  @newevent = @calendar.events.build(event_params)
  if @newevent.save
    redirect_to '/main' #'/main/#{@calendar.id}'
  else
    redirect_to '/compose'
  end
end

任何帮助将不胜感激，谢谢

编辑：这是关于我的数组的javascript。当用户从集合中选择人员选择"同事选择"时，所选人员的 id 将添加到数组中。用户也可以通过另一个点击操作来删除该 id。

var idList = []; //this is the array of entry ids
$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();
        i++;
        var list = $("#list");
        var name = $("#colleague-select option:selected").text();
        var id = $("#colleague-select").val();
        var remove = "<button type='button' class='remove-me'> X </button>";
        var entry = $("<li>" + name + remove+ "</li>").attr('id',id); //creates entry as JQuery object and sets its id attribute
        list.append(entry); //adds entry to HTML element 'list'
        idList.push(id); //adds id to array which should be the same as entry's id
        return false;
    });
});

$(document).on('click', ".remove-me", function(){
    var entry = $(this).parent();
    var id = entry.attr("id"); //gets value of attribute "id".
    entry.remove();
    var index = idList.indexOf(id); //finds the index number of id within array
    idList.splice(index,1); //removes id from array
});

根据要发送的 ID，您可以使用存储 ID 的隐藏字段：

<%= form_for(@newevent) do |f| %>
  # ...
  <%= hidden_field_tag 'some_ids[]', [1,2,3], id: 'extra_ids' %>
  <%= f.submit "Create Meeting", class: "btn-submit" %>
<% end %>

然后收集params中的 ID：

def create
  some_ids = params[:some_ids]
  # ...
end

要使用 Javascript 进行设置：

$(function (){
    $("#click-me").click(function (e){
        # [...]
        idList.push(id); //adds id to array which should be the same as entry's id
        $('#extra_ids').val(idList);
        return false;
    });
});

$(document).on('click', ".remove-me", function(){
    # [...]
    idList.splice(index,1); //removes id from array
    $('#extra_ids').val(idList);
});
相关文章：